TanStack/query · error

No QueryClient set, use QueryClientProvider to set one

Error message

No QueryClient set, use QueryClientProvider to set one

What it means

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.

Source

Thrown at packages/preact-query/src/QueryClientProvider.tsx:18

import type { QueryClient } from '@tanstack/query-core'
import { createContext } from 'preact'
import type { ComponentChildren, VNode } from 'preact'
import { useContext, useEffect } from 'preact/hooks'

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

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

  if (queryClient) {
    return queryClient
  }

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

  return client
}

export type QueryClientProviderProps = {
  client: QueryClient
  children?: ComponentChildren
}

export const QueryClientProvider = ({
  client,
  children,
}: QueryClientProviderProps): VNode => {
  useEffect(() => {
    client.mount()
    return () => {
      client.unmount()

View on GitHub (pinned to 159982c80b)

Solutions

1. Wrap the app tree with `<QueryClientProvider client={queryClient}>`.
2. Pass a client explicitly to the hook: `useQueryClient(myClient)` or `useQuery({ queryClient: myClient, ... })`.
3. In tests, render components inside the provider via the testing library's wrapper.
4. For portals, ensure the portal target is within the provider's tree or pass the client explicitly.

Example fix

// before
render(<TodoList />, document.body)
// after
const qc = new QueryClient()
render(<QueryClientProvider client={qc}><TodoList /></QueryClientProvider>, document.body)

import { useContext } from 'preact/hooks'
import { QueryClientContext } from './QueryClientProvider'
function peekClient() { return useContext(QueryClientContext) }

import { QueryClient } from '@tanstack/query-core'
const isQueryClient = (v: unknown): v is QueryClient =>
  !!v && typeof v.getQueryCache === 'function'

When it happens

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

Common situations: Forgetting `<QueryClientProvider>` in `App`; portals/modals rendered outside the provider tree; multi-root Preact apps; testing components without wrapping them in the provider.

Related errors

• No QueryClient was found in Svelte context. Did you forget t
• No QueryClient found
• No QueryClient found
• No 'queryClient' found in Vue context, use 'VueQueryPlugin'
• usePiPWindow must be used within a PiPProvider

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