Chapter 72: QueryClientProvider

Core Idea

Connects a QueryClient instance to the React tree via context — every useQuery/useMutation/etc. below it resolves to this client unless explicitly overridden with a per-call queryClient argument.

Key Concepts

• Single required prop: client: QueryClient.
• SSR placement rule: must be constructed inside the component tree (state/ref), never at module scope, so each request gets an isolated client (see Server Rendering & Hydration).

Code Examples

const queryClient = new QueryClient()
function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}

Key Takeaways

1. Every hook that needs the client resolves it from the nearest QueryClientProvider by default — the explicit queryClient argument on hooks/QueryClient methods is only for the rarer multi-client case.

Connects To

• Server Rendering & Hydration: the per-request client construction rule.
• useQueryClient: reads back the client this provider supplies.