fix(angular-query-experimental/{withDevtools,injectDevtoolsPanel}): load the devtools only once when options change while loading, and create them with the latest options by sukvvon · Pull Request #12322 · TanStack/query

sukvvon · 2026-10-25T03:07:15Z

🎯 Changes

withDevtools and injectDevtoolsPanel start import('@tanstack/query-devtools') inside an effect whenever no devtools instance exists yet. If the options change before that import resolves, the effect runs again and starts a second import, so two devtools instances are created and mounted. The first one is overwritten and never unmounted. injectDevtoolsPanel also creates the panel with the options captured before loading.

Both now store the loaded devtools class in a signal and create the instance inside the effect:

The import starts only once.
When the class arrives, the effect runs again and creates the devtools with the current options.
If the hostElement is removed, loadDevtools becomes false, or the injector is destroyed while loading, nothing is created. This replaces the injectorIsDestroyed flag in withDevtools.

Behavior changes:

withDevtools without a QueryClient now throws No QueryClient found from the effect, like injectDevtoolsPanel. It was previously caught and logged together with the "Install @tanstack/query-devtools" message.
A failed import is attempted once instead of on every option change.

Tests were added for options changing while loading, for the hostElement being removed and the injector being destroyed while loading (injectDevtoolsPanel), and for loadDevtools becoming false while loading (withDevtools). Existing tests now flush effects with TestBed.tick() after the import settles.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested code changes locally with pnpm run test:pr, or these tests do not apply to this pull request.
I have followed the AI contribution policy and fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Bug Fixes
- Angular Query devtools now load only once when options change during loading, and use the latest options when created.
- Devtools are not created or mounted if loading is disabled or the host element or injector is no longer available.
- Missing QueryClient errors are now surfaced during Angular’s test update cycle.

…oad the devtools only once when options change while loading, and create them with the latest options

changeset-bot · 2026-10-25T03:07:20Z

🦋 Changeset detected

Latest commit: eea8725

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 24 packages

Name	Type
@tanstack/angular-query-experimental	Patch
@tanstack/eslint-plugin-query	Patch
@tanstack/preact-query-devtools	Patch
@tanstack/preact-query-persist-client	Patch
@tanstack/preact-query	Patch
@tanstack/query-async-storage-persister	Patch
@tanstack/query-broadcast-client-experimental	Patch
@tanstack/query-core	Patch
@tanstack/query-devtools	Patch
@tanstack/query-persist-client-core	Patch
@tanstack/query-sync-storage-persister	Patch
@tanstack/react-query-devtools	Patch
@tanstack/react-query-next-experimental	Patch
@tanstack/react-query-persist-client	Patch
@tanstack/react-query	Patch
@tanstack/solid-query-devtools	Patch
@tanstack/solid-query-persist-client	Patch
@tanstack/solid-query	Patch
@tanstack/vue-query	Patch
@tanstack/lit-query	Patch
@tanstack/svelte-query	Patch
@tanstack/svelte-query-devtools	Patch
@tanstack/vue-query-devtools	Patch
@tanstack/svelte-query-persist-client	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

nx-cloud · 2026-10-25T03:07:55Z

View your CI Pipeline Execution ↗ for commit eea8725

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	3m	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	5s	View ↗

☁️ Nx Cloud last updated this comment at 2026-10-25 12:16:21 UTC

github-actions · 2026-10-25T03:08:07Z

🚀 Changeset Version Preview

5 package(s) bumped directly, 19 bumped as dependents.

🟨 Minor bumps

Package	Version	Reason
`@tanstack/angular-query-experimental`	5.104.5 → 5.105.0	Changeset
`@tanstack/solid-query-devtools`	5.104.5 → 5.105.0	Changeset
`@tanstack/vue-query`	5.104.5 → 5.105.0	Changeset
`@tanstack/eslint-plugin-query`	5.104.5 → 5.105.0	Dependent
`@tanstack/preact-query`	5.104.5 → 5.105.0	Dependent
`@tanstack/preact-query-devtools`	5.104.5 → 5.105.0	Dependent
`@tanstack/preact-query-persist-client`	5.104.5 → 5.105.0	Dependent
`@tanstack/query-async-storage-persister`	5.104.5 → 5.105.0	Dependent
`@tanstack/query-broadcast-client-experimental`	5.104.5 → 5.105.0	Dependent
`@tanstack/query-core`	5.104.5 → 5.105.0	Dependent
`@tanstack/query-devtools`	5.104.5 → 5.105.0	Dependent
`@tanstack/query-persist-client-core`	5.104.5 → 5.105.0	Dependent
`@tanstack/query-sync-storage-persister`	5.104.5 → 5.105.0	Dependent
`@tanstack/react-query`	5.104.5 → 5.105.0	Dependent
`@tanstack/react-query-devtools`	5.104.5 → 5.105.0	Dependent
`@tanstack/react-query-next-experimental`	5.104.5 → 5.105.0	Dependent
`@tanstack/react-query-persist-client`	5.104.5 → 5.105.0	Dependent
`@tanstack/solid-query`	5.104.5 → 5.105.0	Dependent
`@tanstack/solid-query-persist-client`	5.104.5 → 5.105.0	Dependent

🟩 Patch bumps

Package	Version	Reason
`@tanstack/svelte-query-devtools`	6.3.5 → 6.3.6	Changeset
`@tanstack/vue-query-devtools`	6.3.5 → 6.3.6	Changeset
`@tanstack/lit-query`	0.2.30 → 0.2.31	Dependent
`@tanstack/svelte-query`	6.3.5 → 6.3.6	Dependent
`@tanstack/svelte-query-persist-client`	6.3.5 → 6.3.6	Dependent

coderabbitai · 2026-10-25T03:08:38Z

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

Run configuration

Source mode: Auto
Repository: TanStack/query
Branch: fix/angular-devtools-load-once
File: .coderabbit.yaml
Commit: eea8725
Layers: Repository YAML
Review profile: CHILL
Plan: Advanced
Run ID: 0db9423e-0467-43d8-8e96-24ddd9eabc17

Commits

Reviewing files that changed from the base of the PR and between 37299b5 and eea8725.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

No actionable comments were generated in the recent review.

Recent review info

Run configuration

Source mode: Auto
Repository: TanStack/query
Branch: fix/angular-devtools-load-once
File: .coderabbit.yaml
Commit: 37299b5
Layers: Repository YAML
Review profile: CHILL
Plan: Advanced
Run ID: a0748856-88a7-42a9-9e47-9d16f5fa8e36

Commits

Reviewing files that changed from the base of the PR and between 6c3cc51 and 37299b5.

Files selected for processing: 5

.changeset/angular-devtools-load-once.md
packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts
packages/angular-query-experimental/src/__tests__/with-devtools.test.ts
packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts
packages/angular-query-experimental/src/devtools/with-devtools.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

The Angular devtools integrations retain the dynamic import and loaded class in reactive state. After loading completes, their effects create and mount instances with the current options. Tests cover option changes and conditions that prevent creation during loading.

Changes: Angular devtools loading

Layer / File(s)	Summary
Panel import and mount `.changeset/angular-devtools-load-once.md`, `packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts`, `packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts`	The panel effect stores the pending import and loaded class, then creates and mounts the panel. Tests cover updated theme options and host-element or injector removal during loading.
withDevtools import and mount `packages/angular-query-experimental/src/devtools/with-devtools.ts`, `packages/angular-query-experimental/src/__tests__/with-devtools.test.ts`	The effect stores the pending import and loaded class, then creates and mounts devtools. Tests cover updated options, disabling during loading, missing-client behavior, and existing asynchronous lifecycle cases.

Priority: Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Possibly related PRs

TanStack/query#12316: Adds the panel theme option and forwards it to the constructor; this change tests that the loaded panel uses the latest theme.

Suggested reviewers: arnoud-dv

Merge Risk: Minimal · up to 37299

The reported loading and cancellation behavior leaves no identified merge-blocking issue; proceed with normal checks.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly identifies the affected Angular APIs and the main fix: loading devtools once and creating them with the latest options. It is longer than preferred but remains specific and relevant.
Description check		The description explains the problem, implementation, behavior changes, tests, checklist status, and release impact. It includes the required changeset information and reports local testing.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 4…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 4 files. (1 skipped: 1 unsupported.)

Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-10-25T03:09:35Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@12322

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@12322

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@12322

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@12322

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@12322

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@12322

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@12322

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@12322

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@12322

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@12322

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@12322

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@12322

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@12322

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@12322

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@12322

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@12322

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@12322

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@12322

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@12322

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@12322

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@12322

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@12322

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@12322

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@12322

commit: eea8725

github-actions · 2026-10-25T03:09:49Z

size-limit report 📦

Path	Size
react full	11.76 KB (0%)
react minimal	8.59 KB (0%)

fix(angular-query-experimental/{withDevtools,injectDevtoolsPanel}): l…

37299b5

…oad the devtools only once when options change while loading, and create them with the latest options

sukvvon self-assigned this Oct 25, 2026

Merge branch 'main' into fix/angular-devtools-load-once

eea8725

Navigation Menu

Repository navigation

fix(angular-query-experimental/{withDevtools,injectDevtoolsPanel}): load the devtools only once when options change while loading, and create them with the latest options - #12322

fix(angular-query-experimental/{withDevtools,injectDevtoolsPanel}): load the devtools only once when options change while loading, and create them with the latest options#12322
sukvvon wants to merge 2 commits into
mainfrom
fix/angular-devtools-load-once

sukvvon commented Oct 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Oct 25, 2026 •

edited

Loading

Uh oh!

nx-cloud Bot commented Oct 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 25, 2026

Uh oh!

coderabbitai Bot commented Oct 25, 2026 •

edited

Loading

Review skipped

Uh oh!

pkg-pr-new Bot commented Oct 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 25, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

sukvvon commented Oct 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

nx-cloud Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 25, 2026

🚀 Changeset Version Preview

🟨 Minor bumps

🟩 Patch bumps

Uh oh!

coderabbitai Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

pkg-pr-new Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 25, 2026

size-limit report 📦

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented Oct 25, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Oct 25, 2026 •

edited

Loading

nx-cloud Bot commented Oct 25, 2026 •

edited

Loading

coderabbitai Bot commented Oct 25, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 25, 2026 •

edited

Loading