{"record":{"id":"13dd6de7808da9af","repo":"TanStack/query","slug":"no-queryclient-found-13dd6d","errorCode":null,"errorMessage":"No QueryClient found","messagePattern":"No QueryClient found","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/angular-query-experimental/src/devtools/with-devtools.ts","lineNumber":109,"sourceCode":"          })\n          const destroyRef = inject(DestroyRef)\n          const devtoolsOptions = inject(DEVTOOLS_OPTIONS_SIGNAL)\n          const injector = inject(Injector)\n\n          let devtools: TanstackQueryDevtools | null = null\n          let el: HTMLElement | null = null\n\n          const shouldLoadToolsSignal = computed(() => {\n            const { loadDevtools } = devtoolsOptions()\n            return typeof loadDevtools === 'boolean'\n              ? loadDevtools\n              : isDevMode()\n          })\n\n          const getResolvedQueryClient = () => {\n            const client = devtoolsOptions().client ?? injectedClient\n            if (!client) {\n              throw new Error('No QueryClient found')\n            }\n            return client\n          }\n\n          const destroyDevtools = () => {\n            devtools?.unmount()\n            el?.remove()\n            devtools = null\n          }\n\n          effect(\n            () => {\n              const shouldLoadTools = shouldLoadToolsSignal()\n              const {\n                client,\n                position,\n                errorTypes,\n                buttonPosition,","sourceCodeStart":91,"sourceCodeEnd":127,"githubUrl":"https://github.com/TanStack/query/blob/159982c80b844487054155c38ffc760fe4208daf/packages/angular-query-experimental/src/devtools/with-devtools.ts#L91-L127","documentation":"Thrown by `getResolvedQueryClient()` inside the `withDevtools` environment initializer effect when `devtoolsOptions().client ?? injectedClient` is falsy. `withDevtools` is meant to be added to `provideTanStackQuery` alongside the QueryClient provider; if the client token is absent from DI and the devtools options callback did not supply one, devtools cannot attach to anything and abort.","triggerScenarios":"Using `withDevtools()` in `provideTanStackQuery` while NOT passing a `QueryClient` as the first argument to `provideTanStackQuery`; calling `withDevtools` via `queryFeature` outside of `provideTanStackQuery`; providing the `QueryClient` in a sibling/lazy injector that the devtools environment initializer cannot see.","commonSituations":"Calling `provideTanStackQuery()` with no `QueryClient` argument; splitting providers so `withDevtools` lands in a different injector from the client; upgrading from an older Angular Query setup that registered the client under a different token; providing `withDevtools` twice or in a child injector that lacks the client.","solutions":["Pass a `QueryClient` to `provideTanStackQuery`: `provideTanStackQuery(new QueryClient(), withDevtools())`.","If you supply the client dynamically, return it from the devtools options function: `withDevtools(() => ({ client: clientSignal() }))`.","Confirm the `QueryClient` is in the root injector and not gated behind a lazy-loaded route that initializes after the environment initializer runs.","Temporarily remove `withDevtools` to verify the QueryClient provider is wired, then re-add it."],"exampleFix":"// before\nproviders: [provideTanStackQuery(), withDevtools()]\n// after\nproviders: [provideTanStackQuery(new QueryClient(), withDevtools())]","handlingStrategy":"validation","validationCode":"// Verify both sources before relying on getResolvedQueryClient.\nconst ensureDevtoolsClient = (optsClient: unknown, injected: QueryClient | null): QueryClient => {\n  const c = (optsClient as QueryClient) ?? injected\n  if (!c) throw new Error('withDevtools: no QueryClient in DI or options.client')\n  return c\n}","typeGuard":"const hasClient = (o: { client?: unknown }): o is { client: QueryClient } =>\n  !!o.client && typeof o.client.getQueryCache === 'function'","tryCatchPattern":"// In the effect, degrade gracefully if the client is missing.\ntry { const client = getResolvedQueryClient() /* ... */ }\ncatch (e) { console.warn('[withDevtools]', (e as Error).message) }","preventionTips":["Always pass a QueryClient to `provideTanStackQuery` when using `withDevtools`.","Return `client` from the devtools options function if you construct it lazily.","Add an integration test that asserts devtools mount in dev mode.","Document the QueryClient requirement wherever `withDevtools` is configured."],"tags":["angular","devtools","dependency-injection","queryclient","configuration"],"backgroundTag":null,"analyzedSha":"159982c80b844487054155c38ffc760fe4208daf","analyzedAt":"2026-08-12T16:21:52.822Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}