{"record":{"id":"0154d34c1e69c1b1","repo":"TanStack/query","slug":"no-queryclient-set-use-queryclientprovider-to-set","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":"error","filePath":"packages/preact-query/src/QueryClientProvider.tsx","lineNumber":18,"sourceCode":"import type { QueryClient } from '@tanstack/query-core'\nimport { createContext } from 'preact'\nimport type { ComponentChildren, VNode } from 'preact'\nimport { useContext, useEffect } from 'preact/hooks'\n\nexport const QueryClientContext = createContext<QueryClient | undefined>(\n  undefined,\n)\n\nexport const useQueryClient = (queryClient?: QueryClient) => {\n  const client = 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?: ComponentChildren\n}\n\nexport const QueryClientProvider = ({\n  client,\n  children,\n}: QueryClientProviderProps): VNode => {\n  useEffect(() => {\n    client.mount()\n    return () => {\n      client.unmount()","sourceCodeStart":1,"sourceCodeEnd":36,"githubUrl":"https://github.com/TanStack/query/blob/159982c80b844487054155c38ffc760fe4208daf/packages/preact-query/src/QueryClientProvider.tsx#L1-L36","documentation":"Thrown by Preact Query's `useQueryClient` when `useContext(QueryClientContext)` returns undefined and no explicit `queryClient` argument was passed. The context default is `undefined`, so any component rendered outside `<QueryClientProvider>` triggers this on the first hook call.","triggerScenarios":"Using `useQuery`/`useMutation`/`useQueryClient()` in a component that is not a descendant of `<QueryClientProvider>`; rendering a hook-using component via a portal or in a separate Preact root that lacks the provider; passing `undefined` to the hook's optional `queryClient` arg while context is also empty.","commonSituations":"Forgetting `<QueryClientProvider>` in `App`; portals/modals rendered outside the provider tree; multi-root Preact apps; testing components without wrapping them in the provider.","solutions":["Wrap the app tree with `<QueryClientProvider client={queryClient}>`.","Pass a client explicitly to the hook: `useQueryClient(myClient)` or `useQuery({ queryClient: myClient, ... })`.","In tests, render components inside the provider via the testing library's wrapper.","For portals, ensure the portal target is within the provider's tree or pass the client explicitly."],"exampleFix":"// before\nrender(<TodoList />, document.body)\n// after\nconst qc = new QueryClient()\nrender(<QueryClientProvider client={qc}><TodoList /></QueryClientProvider>, document.body)","handlingStrategy":"validation","validationCode":"import { useContext } from 'preact/hooks'\nimport { QueryClientContext } from './QueryClientProvider'\nfunction peekClient() { return useContext(QueryClientContext) }","typeGuard":"import { QueryClient } from '@tanstack/query-core'\nconst isQueryClient = (v: unknown): v is QueryClient =>\n  !!v && typeof v.getQueryCache === 'function'","tryCatchPattern":null,"preventionTips":["Wrap the app with `<QueryClientProvider client={qc}>` at the root.","Pass an explicit `queryClient` to hooks as a fallback for portals.","In tests, render components within the provider via the testing-library wrapper.","Avoid rendering hook-using components into separate roots without a provider."],"tags":["preact","context","queryclient","provider","configuration"],"backgroundTag":null,"analyzedSha":"159982c80b844487054155c38ffc760fe4208daf","analyzedAt":"2026-08-12T16:21:52.822Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}