TanStack/query · error

No QueryClient was found in Svelte context. Did you forget…

Error message

No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?

What it means

Thrown by `getQueryClientContext` in `@tanstack/svelte-query`. The function calls Svelte's `getContext` with the internal `QueryClient` symbol key; if no ancestor called `setQueryClientContext` (typically via `QueryClientProvider`), the context is undefined and the function refuses to return.

Solutions

  1. Wrap the component tree with `<QueryClientProvider client={queryClient}>`.
  2. Call `setQueryClientContext(queryClient)` in the root component's setup if not using the provider component.
  3. Ensure hooks are called inside `.svelte` components or `.svelte.js/.svelte.ts` modules invoked from a component's reactive context.
  4. For SSR, set the client in the root `+layout.svelte` and verify context propagation through slots.

Example fix

// before
// App.svelte
<Counter />
// after
<script>import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'; const qc = new QueryClient();</script>
<QueryClientProvider client={qc}><Counter /></QueryClientProvider>
Defensive patterns

Strategy: validation

Validate before calling

import { getContext } from 'svelte'
import { QueryClient } from '@tanstack/query-core'
const QUERY_CLIENT_KEY = Symbol('QueryClient')
function peekQueryClient(): QueryClient | undefined {
  return getContext<QueryClient | undefined>(QUERY_CLIENT_KEY)
}

Type guard

const isQueryClient = (v: unknown): v is QueryClient =>
  !!v && typeof (v as QueryClient).getQueryCache === 'function'

Prevention

When it happens

Trigger: Using any svelte-query hook (`createQuery`, `createMutation`, etc.) in a component rendered outside `<QueryClientProvider>`; calling a hook in a `.svelte.ts` module that runs outside the component tree; setting the client on a different context key; SSR where context was not propagated.

Common situations: Forgetting the provider in `App.svelte` or `+layout.svelte`; using svelte-query inside a non-component utility; providing the client only in a child route while hooks run in the parent; mixing `setQueryClientContext` with a custom key.

Related errors


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

Appendix: source

Thrown at packages/svelte-query/src/context.ts:11

import { getContext, setContext } from 'svelte'
import type { QueryClient } from '@tanstack/query-core'
import type { Box } from './containers.svelte'

const _contextKey = Symbol('QueryClient')

/** Retrieves a Client from Svelte's context */
export const getQueryClientContext = (): QueryClient => {
  const client = getContext<QueryClient | undefined>(_contextKey)
  if (!client) {
    throw new Error(
      'No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?',
    )
  }

  return client
}

/** Sets a QueryClient on Svelte's context */
export const setQueryClientContext = (client: QueryClient): void => {
  setContext(_contextKey, client)
}

const _isRestoringContextKey = Symbol('isRestoring')

/** Retrieves a `isRestoring` from Svelte's context */
export const getIsRestoringContext = (): Box<boolean> => {
  try {
    const isRestoring = getContext<Box<boolean> | undefined>(

View on GitHub (pinned to 159982c80b)