A query client manages React Query’s shared cache, configuration, and query-related functionality. Create one client instance and make it available to descendant components through QueryClientProvider. section 10.3.2
This shared client prevents repeated requests when different views need the same server data. Components can retrieve the client with useQueryClient and read cached data with an associated query key. section 10.3 section 10.3.4
Populate an edit form from cached data
After the Bookables page loads its list, BookableEdit can call getQueryData("bookables"), find the requested item, and pass it as useQuery’s initialData. Direct navigation still allows the query to fetch from the server when no cached item exists. section 10.3.4
Listing 10.10 Wrapping the app in a QueryClientProvider component
import {QueryClient, QueryClientProvider} from "react-query"; #1
// other imports
const queryClient = new QueryClient(); #2
export default function App () {
return (
<QueryClientProvider client={queryClient}> #3
<UserProvider>
<Router>
{/* unchanged JSX */}
</Router>
</UserProvider>
</QueryClientProvider> #3
);
}
#1 Import the client constructor and provider component from React Query.
#2 Create a client instance.
#3 Wrap the app in the provider, setting the client as a prop.
Shows the complete setup: importing QueryClient and QueryClientProvider, creating a client, and wrapping the application tree. section 10.3.2
