{"record":{"id":"2cdaff913265a2f9","repo":"TanStack/query","slug":"no-queryclient-set-use-queryclientprovider-to-set-2cdaff","errorCode":null,"errorMessage":"No QueryClient set, use QueryClientProvider to set one","messagePattern":"No QueryClient set, use QueryClientProvider to set one","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"critical","filePath":"packages/react-query/src/QueryClientProvider.tsx","lineNumber":18,"sourceCode":"'use client'\nimport * as React from 'react'\n\nimport type { QueryClient } from '@tanstack/query-core'\n\nexport const QueryClientContext = React.createContext<QueryClient | undefined>(\n  undefined,\n)\n\nexport const useQueryClient = (queryClient?: QueryClient) => {\n  const client = React.useContext(QueryClientContext)\n\n  if (queryClient) {\n    return queryClient\n  }\n\n  if (!client) {\n    throw new Error('No QueryClient set, use QueryClientProvider to set one')\n  }\n\n  return client\n}\n\nexport type QueryClientProviderProps = {\n  client: QueryClient\n  children?: React.ReactNode\n}\n\nexport const QueryClientProvider = ({\n  client,\n  children,\n}: QueryClientProviderProps): React.JSX.Element => {\n  React.useEffect(() => {\n    client.mount()\n    return () => {\n      client.unmount()","sourceCodeStart":1,"sourceCodeEnd":36,"githubUrl":"https://github.com/TanStack/query/blob/159982c80b844487054155c38ffc760fe4208daf/packages/react-query/src/QueryClientProvider.tsx#L1-L36","documentation":"Thrown by React's `useQueryClient()` when no `QueryClient` is available: the explicit `queryClient` argument was not passed AND `React.useContext(QueryClientContext)` returned `undefined`. This means there is no `<QueryClientProvider client={...}>` ancestor of the component calling `useQueryClient`. The hook refuses to return `undefined` because every downstream hook (`useQuery`, `useMutation`, etc.) would crash anyway; throwing here points at the real cause.","triggerScenarios":"Calling `useQueryClient()`, `useQuery`, `useMutation`, `useInfiniteQuery`, etc. in a component rendered outside a `<QueryClientProvider>`. Also when an explicit client is not passed and the context is empty — e.g. the provider was not rendered, was rendered below the consumer, was conditionally skipped, or the consumer is rendered via a portal/inline import that escapes the React tree.","commonSituations":"Forgot to wrap the app in `<QueryClientProvider client={new QueryClient()}>`; rendered a querying component in a Storybook story, test, or modal portal without the provider; provider placed inside a subtree but the component renders through a React portal whose tree is detached; multiple React copies / context identity mismatch across packages; HMR causing context identity drift.","solutions":["Wrap the application root (or at least the subtree containing querying components) with `<QueryClientProvider client={queryClient}>`.","In tests/stories, render with the provider: `render(<Component />, { wrapper: ({ children }) => <QueryClientProvider client={qc}>{children}</QueryClientProvider> })`.","Pass the client explicitly to bypass context: `useQueryClient(queryClient)` or `useQuery({ queryKey, queryFn, context: ... })`.","Verify there is only one copy of `@tanstack/react-query` installed (`npm ls @tanstack/react-query`) so the context singleton matches between provider and consumer."],"exampleFix":"// before - querying component rendered without a provider\nfunction App() {\n  const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })\n  return <ul>{data?.map(t => <li key={t.id}>{t.title}</li>)}</ul>\n}\n\n// after - wrap with QueryClientProvider\nconst queryClient = new QueryClient()\nfunction App() {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <Todos />\n    </QueryClientProvider>\n  )\n}","handlingStrategy":"validation","validationCode":"// Ensure the consumer is rendered within a provider\nimport React, { useContext } from 'react'\nimport { QueryClientContext } from '@tanstack/react-query'\nconst hasQueryClient = () => useContext(QueryClientContext) !== undefined\n// In a component: if (!hasQueryClient()) throw new Error('wrap me in QueryClientProvider')","typeGuard":"import { useContext } from 'react'\nimport { QueryClientContext, type QueryClient } from '@tanstack/react-query'\nfunction useOptionalQueryClient(): QueryClient | undefined {\n  return useContext(QueryClientContext)\n}\n// consumer: const client = useOptionalQueryClient(); if (!client) return null","tryCatchPattern":"let client\ntry {\n  client = useQueryClient()\n} catch (e) {\n  if (e.message === 'No QueryClient set, use QueryClientProvider to set one') {\n    // either render nothing, or pass a fallback client explicitly\n    return null\n  }\n  throw e\n}","preventionTips":["Always wrap the app root with <QueryClientProvider client={new QueryClient()}>.","In tests/stories, pass a wrapper that renders the provider around children.","Pass the client explicitly (useQueryClient(client)) to bypass context when needed.","Run npm ls @tanstack/react-query to ensure a single copy so context identity is stable."],"tags":["react-query","context","provider","query-client","bootstrap"],"backgroundTag":null,"analyzedSha":"159982c80b844487054155c38ffc760fe4208daf","analyzedAt":"2026-08-12T16:21:52.822Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}