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: c160cb9e-8ae1-4103-8ea6-6feaef705ad9

📥 Commits

Reviewing files that changed from the base of the PR and between fd50fa1 and 2fb05d7.

📒 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

---

📝 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

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#10785: Overlaps in Devtools test provider-tree wiring.
• TanStack/query#11112: Addresses similar per-instance Devtools UI and cache state isolation.

Suggested labels:package: query-devtools

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The template sections are present, but the Changes, checklist, and Release Impact entries are mostly left unfilled.	Add a concrete Changes summary, complete the checklist items, and state the release impact/changeset status.
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: isolating state across multiple DevTools instances.
Linked Issues check	✅ Passed	The PR addresses #9681 by moving shared DevTools UI and cache state into a per-instance context, matching the isolation requirement.
Out of Scope Changes check	✅ Passed	The changes stay focused on DevTools state isolation and a regression test, with no obvious unrelated code added.

✨ 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.}