{"record":{"id":"dc4c96cc758550c2","repo":"TanStack/query","slug":"no-queryclient-set-use-queryclientprovider-to-set-dc4c96","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/solid-query/src/QueryClientProvider.tsx","lineNumber":21,"sourceCode":"  createRenderEffect,\n  onCleanup,\n  useContext,\n} from 'solid-js'\nimport type { QueryClient } from './QueryClient'\nimport type { JSX } from 'solid-js'\n\nexport const QueryClientContext = createContext<\n  (() => QueryClient) | undefined\n>(undefined)\n\nexport const useQueryClient = (queryClient?: QueryClient) => {\n  if (queryClient) {\n    return queryClient\n  }\n  const client = useContext(QueryClientContext)\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?: JSX.Element\n}\n\nexport const QueryClientProvider = (\n  props: QueryClientProviderProps,\n): JSX.Element => {\n  createRenderEffect<() => void>((unmount) => {\n    unmount?.()\n    props.client.mount()\n    return props.client.unmount.bind(props.client)\n  })","sourceCodeStart":3,"sourceCodeEnd":39,"githubUrl":"https://github.com/TanStack/query/blob/159982c80b844487054155c38ffc760fe4208daf/packages/solid-query/src/QueryClientProvider.tsx#L3-L39","documentation":"Thrown by Solid's `useQueryClient()` when no client is available: the explicit `queryClient` argument was not passed AND `useContext(QueryClientContext)` returned `undefined`. Solid-Query uses a context of `() => QueryClient` (the provider stores an accessor); if there is no `<QueryClientProvider client={...}>` ancestor, `client` is `undefined` and calling it would throw a less helpful TypeError, so the guard throws this message instead. Semantically identical to the React variant.","triggerScenarios":"Calling `useQueryClient()`, `createQuery`, `createMutation`, etc. in a Solid component that is rendered outside a `<QueryClientProvider>`. Also when the provider is below the consumer in the JSX tree, conditionally skipped, or when the consumer is rendered outside the provider's reactive scope (e.g. in a portal or detached root).","commonSituations":"Forgot to wrap the Solid app root in `<QueryClientProvider client={queryClient}>`; rendering a querying component in a test (e.g. `render(Component)` from `solid-testing-library`) without a wrapper provider; provider placed inside a `<Show>`/`<Switch>` that did not mount; multiple copies of `@tanstack/solid-query` causing context identity mismatch.","solutions":["Wrap the Solid root with `<QueryClientProvider client={queryClient}>`.","In tests, wrap with the provider: `render(() => <QueryClientProvider client={qc}><Component /></QueryClientProvider>)`.","Pass the client explicitly to bypass context: `useQueryClient(queryClient)`.","Verify only one copy of `@tanstack/solid-query` is installed so the context singleton is shared between provider and consumer."],"exampleFix":"// before - querying component without provider\nfunction App() {\n  const query = createQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))\n  return <For each={query.data}>{t => <li>{t.title}</li>}</For>\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 within a provider before relying on the hook\nimport { useContext } from 'solid-js'\nimport { QueryClientContext } from '@tanstack/solid-query'\nconst hasQueryClient = () => useContext(QueryClientContext) !== undefined","typeGuard":"import { useContext } from 'solid-js'\nimport { QueryClientContext, type QueryClient } from '@tanstack/solid-query'\nfunction useOptionalQueryClient(): (() => QueryClient) | undefined {\n  return useContext(QueryClientContext)\n}\n// consumer: const accessor = useOptionalQueryClient(); if (!accessor) 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    return null\n  }\n  throw e\n}","preventionTips":["Wrap the Solid app root with <QueryClientProvider client={new QueryClient()}>.","In tests, render(() => <QueryClientProvider client={qc}><Component /></QueryClientProvider>).","Pass the client explicitly (useQueryClient(client)) to bypass context when needed.","Run npm ls @tanstack/solid-query to ensure a single copy so the context singleton is shared."],"tags":["solid-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"}