fix(query-devtools): isolate state across multiple mounted instances

[alishoja88]

Selection, panel width, offline-mocking, and cache-subscription state lived in module-level signals/maps in Devtools.tsx, so every mounted Devtools instance (e.g. two panels bound to two different QueryClients) shared the same state. Selecting a query, resizing, or notifying one client's cache leaked into every other mounted panel.

Move this state into a per-instance DevtoolsUiProvider/context so each mount is fully isolated.

Fixes #9681

🎯 Changes

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm run test:pr.

🚀 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

  • Fixed Devtools panels interfering with one another when multiple instances are mounted simultaneously.
  • Selections, panel sizing, offline mode, and cache updates now remain isolated for each panel.
  • Each Devtools instance consistently displays data from its associated query client.

• Tests

  • Added coverage for multi-instance state and cache isolation scenarios.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 96a99bae-27b2-4c4c-a93c-347765ec3620

📥 Commits

Reviewing files that changed from the base of the PR and between 5ca904d and 1480d3f.

📒 Files selected for processing (8)

• .changeset/isolate-devtools-instances.md
• packages/query-devtools/src/Devtools.tsx
• packages/query-devtools/src/DevtoolsComponent.tsx
• packages/query-devtools/src/DevtoolsPanelComponent.tsx
• packages/query-devtools/src/__tests__/Devtools.test.tsx
• packages/query-devtools/src/__tests__/MultiInstanceIsolation.test.tsx
• packages/query-devtools/src/contexts/DevtoolsUiContext.tsx
• packages/query-devtools/src/contexts/index.ts

🚧 Files skipped from review as they are similar to previous changes (7)

• packages/query-devtools/src/contexts/index.ts
• packages/query-devtools/src/DevtoolsComponent.tsx
• packages/query-devtools/src/DevtoolsPanelComponent.tsx
• packages/query-devtools/src/tests/Devtools.test.tsx
• .changeset/isolate-devtools-instances.md
• packages/query-devtools/src/tests/MultiInstanceIsolation.test.tsx
• packages/query-devtools/src/Devtools.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

Devtools UI state and query/mutation cache subscription maps now live in per-instance Solid context. Provider wiring is updated across components and tests, with regression coverage for simultaneous panels using separate QueryClient instances.

Changes

Devtools instance isolation

Layer / File(s)	Summary
Add per-instance UI context packages/query-devtools/src/contexts/DevtoolsUiContext.tsx, packages/query-devtools/src/contexts/index.ts	Defines and exports DevtoolsUiProvider, useDevtoolsUiContext, UI state signals, and per-instance cache subscription maps.
Wire context through Devtools packages/query-devtools/src/Devtools.tsx, packages/query-devtools/src/DevtoolsComponent.tsx, packages/query-devtools/src/DevtoolsPanelComponent.tsx	Routes selection, panel sizing, offline state, and cache subscriptions through the provider in Devtools component trees.
Validate multiple mounted instances packages/query-devtools/src/__tests__/MultiInstanceIsolation.test.tsx, packages/query-devtools/src/__tests__/Devtools.test.tsx, .changeset/isolate-devtools-instances.md	Tests independent selection and cache display across two Devtools instances and records a patch release.

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

Merge Risk: ⚪ Minimal · up to 1480d

The change isolates Devtools state per mounted instance, preventing selections, sizing, and cache notifications from leaking between panels; no actionable merge-blocking risk remains beyond normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant DevtoolsComponent
  participant DevtoolsUiProvider
  participant Devtools
  participant QueryClient
  DevtoolsComponent->>DevtoolsUiProvider: create instance-scoped UI state
  DevtoolsUiProvider->>Devtools: provide selections and cache maps
  Devtools->>QueryClient: subscribe to caches
  QueryClient-->>Devtools: update the instance's cache data

Loading

Possibly related PRs

• TanStack/query#11112: Implements similar per-instance Devtools UI and cache state isolation.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 7 files. (1 skipped: 1 unsupported.)	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary change: isolating state across multiple mounted Query DevTools instances.
Description check	✅ Passed	The description explains the bug and solution and includes all template sections, although checklist items remain unchecked.
Linked Issues check	✅ Passed	The per-instance context, provider integration, and isolation tests address the state leakage described in issue #9681.
Out of Scope Changes check	✅ Passed	The code, tests, context exports, and changeset all directly support isolating multiple Query DevTools instances.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

[nx-cloud]

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

---

View your CI Pipeline Execution ↗ for commit 1480d3f

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	❌ Failed	5m 18s	View ↗
nx run-many --target=build --exclude=examples/*...	❌ Failed	49s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-08-22 08:56:07 UTC

[TkDodo]

please take a look at the failing build:

../query-devtools/src/__tests__/MultiInstanceIsolation.test.tsx(117,28): error TS2345: Argument of type 'HTMLElement | undefined' is not assignable to parameter of type 'HTMLElement'.