No QueryClient set, use QueryClientProvider to set one

Error message

No QueryClient set, use QueryClientProvider to set one

What it means

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.

Source

Thrown at packages/solid-query/src/QueryClientProvider.tsx:21

  createRenderEffect,
  onCleanup,
  useContext,
} from 'solid-js'
import type { QueryClient } from './QueryClient'
import type { JSX } from 'solid-js'

export const QueryClientContext = createContext<
  (() => QueryClient) | undefined
>(undefined)

export const useQueryClient = (queryClient?: QueryClient) => {
  if (queryClient) {
    return queryClient
  }
  const client = useContext(QueryClientContext)

  if (!client) {
    throw new Error('No QueryClient set, use QueryClientProvider to set one')
  }

  return client()
}

export type QueryClientProviderProps = {
  client: QueryClient
  children?: JSX.Element
}

export const QueryClientProvider = (
  props: QueryClientProviderProps,
): JSX.Element => {
  createRenderEffect<() => void>((unmount) => {
    unmount?.()
    props.client.mount()
    return props.client.unmount.bind(props.client)
  })

View on GitHub (pinned to 159982c80b)

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.

Example fix

// before - querying component without provider
function App() {
  const query = createQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos }))
  return <For each={query.data}>{t => <li>{t.title}</li>}</For>
}

// after - wrap with QueryClientProvider
const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

Defensive patterns

Strategy: validation

Validate before calling

// Ensure the consumer is within a provider before relying on the hook
import { useContext } from 'solid-js'
import { QueryClientContext } from '@tanstack/solid-query'
const hasQueryClient = () => useContext(QueryClientContext) !== undefined

Type guard

import { useContext } from 'solid-js'
import { QueryClientContext, type QueryClient } from '@tanstack/solid-query'
function useOptionalQueryClient(): (() => QueryClient) | undefined {
  return useContext(QueryClientContext)
}
// consumer: const accessor = useOptionalQueryClient(); if (!accessor) return null

Try / catch

let client
try {
  client = useQueryClient()
} catch (e) {
  if (e.message === 'No QueryClient set, use QueryClientProvider to set one') {
    return null
  }
  throw e
}

Prevention

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.

When it happens

Trigger: 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).

Common situations: 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.

Related errors

AI-assisted analysis of TanStack/query@159982c80b (2026-08-12). Data as JSON: /api/errors/dc4c96cc758550c2. Report an issue: GitHub.