No 'queryClient' found in Vue context, use 'VueQueryPlugin'

Error message

No 'queryClient' found in Vue context, use 'VueQueryPlugin' to properly initialize the library.

What it means

Second guard in `useQueryClient`: Vue's `hasInjectionContext()` passed, but `inject(getClientKey(id))` returned undefined. This means the component is inside setup but `VueQueryPlugin.install` never ran for the app (no client provided), or a different `id` was used to install vs. consume.

Source

Thrown at packages/vue-query/src/useQueryClient.ts:18

import { hasInjectionContext, inject } from 'vue-demi'

import { getClientKey } from './utils'
import type { QueryClient } from './queryClient'

export function useQueryClient(id = ''): QueryClient {
  // ensures that `inject()` can be used
  if (!hasInjectionContext()) {
    throw new Error(
      'vue-query hooks can only be used inside setup() function or functions that support injection context.',
    )
  }

  const key = getClientKey(id)
  const queryClient = inject<QueryClient>(key)

  if (!queryClient) {
    throw new Error(
      "No 'queryClient' found in Vue context, use 'VueQueryPlugin' to properly initialize the library.",
    )
  }

  return queryClient
}

View on GitHub (pinned to 159982c80b)

Solutions

Install the plugin with an explicit client: `app.use(VueQueryPlugin, { queryClient: new QueryClient() })`.
If using a custom `id` in install, pass the same `id` to `useQueryClient(id)`.
Verify only one Vue app instance is in play and the plugin is registered on it.
For SSR, ensure `VueQueryPlugin` is installed in both server and client app creation paths.

Example fix

// before
const app = createApp(App)
app.mount('#app')
// after
import { VueQueryPlugin } from '@tanstack/vue-query'
import { QueryClient } from '@tanstack/query-core'
const app = createApp(App)
app.use(VueQueryPlugin, { queryClient: new QueryClient() })
app.mount('#app')

Defensive patterns

Strategy: validation

Validate before calling

import { inject, hasInjectionContext } from 'vue-demi'
import { getClientKey } from './utils'
function tryFindQueryClient(id = ''): ReturnType<typeof inject> | undefined {
  if (!hasInjectionContext()) return undefined
  return inject(getClientKey(id), undefined)
}

Type guard

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

Prevention

Install `VueQueryPlugin` with an explicit client: `app.use(VueQueryPlugin, { queryClient })`.
If using a custom `id`, pass the same `id` to `useQueryClient(id)`.
Register the plugin on the same app instance that mounts the components using hooks.
For SSR, install the plugin in both server and client app creation.

When it happens

Trigger: Using vue-query hooks without registering `VueQueryPlugin` via `app.use(VueQueryPlugin, { queryClient })`; registering the plugin with a custom `id` but consuming with a different `id`; registering the plugin on a different app instance than the one rendering the component.

Common situations: Forgetting `app.use(VueQueryPlugin, { queryClient })` in `main.ts`; passing `VueQueryPlugin` without options (it falls back to creating its own client only if configured); multi-app setups where the plugin is registered on app A but the component is in app B; SSR entry missing plugin install.

Related errors

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