fix(devtools): Moved DevTool Instance specific settings to a context to have proper isolation #10006

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Open

gk9848970 wants to merge 11 commits into TanStack:main

from gk9848970:fix_isolation_of_devtools

Open

fix(devtools): Moved DevTool Instance specific settings to a context to have proper isolation #10006

gk9848970 wants to merge 11 commits into TanStack:main from gk9848970:fix_isolation_of_devtools

+166 −47

Conversation

@gk9848970

Copy link

Contributor

@gk9848970 gk9848970 commented Dec 30, 2025 •

edited by coderabbitai bot

Loading

🎯 Changes

Fixes: 9681

Motivation - I was looking to have my first meaningful contribution, As last time I only did some docs link change.

Issue - We were having many issues of isolation like:

Query status and Query details issue
Could only see one query's detail out of two query devtools

Before this PR:

Screen.Recording.2025年12月31日.at.1.06.01.AM.mov

Fix - I saw how we handle query client being separate for each devtool, Using context. So I put all the things related to one devtools instance in it's own context

After this PR:

Screen.Recording.2025年12月31日.at.1.12.27.AM.mov

✅ 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

New Features
- Devtools now use a centralized state provider for more consistent panel, selection, and cache behavior across the UI.
Bug Fixes
- Fixed issue where multiple Devtools instances could share state; panels and selections are now isolated per instance.
Documentation
- Added a changeset/patch note describing the isolation fix.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

gaurav-dt added 5 commits

December 30, 2025 23:49

@gaurav-dt


 Moved DevTool Instance specific settings to a context

9a023cf

@gaurav-dt


 Added change log

520c0be

@gaurav-dt


 Unused var

d9fe74f

@gaurav-dt


 Fixed lint

a0b397c

@gaurav-dt


 Fixed changeset description

79a01d5

@changeset-bot

Copy link

changeset-bot bot commented Dec 30, 2025 •

edited

Loading

🦋 Changeset detected

Latest commit: 47aa1fb

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

This PR includes changesets to release 7 packages

Name	Type
@tanstack/query-devtools	Patch
@tanstack/angular-query-experimental	Patch
@tanstack/react-query-devtools	Patch
@tanstack/solid-query-devtools	Patch
@tanstack/svelte-query-devtools	Patch
@tanstack/vue-query-devtools	Patch
@tanstack/angular-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

@github-actions github-actions bot added the package: query-devtools label

Dec 30, 2025

@coderabbitai

Copy link

Contributor

coderabbitai bot commented Dec 30, 2025 •

edited

Loading

📝 Walkthrough

Walkthrough

Introduces a new DevtoolsStateContext and useDevtoolsState hook to centralize UI state (selectedQueryHash, selectedMutationId, panelWidth, offline) and typed cache maps (queryCacheMap, mutationCacheMap); Devtools components are updated to provide and consume that context instead of local signals.

Changes

Cohort / File(s)	Summary
Changeset Documentation `\`.changeset/true-loops-report.md``	Adds a patch changeset noting multiple Devtool instances sharing state; declarative only.
Context Infrastructure `packages/query-devtools/src/contexts/DevtoolsStateContext.ts`, `packages/query-devtools/src/contexts/index.ts`	New strongly-typed `DevtoolsStateContext`, `useDevtoolsState()` hook, types `QueryCacheMapValue`, `MutationCacheMapValue`, `QueryCacheMap`, `MutationCacheMap`, and `DevtoolsState` interface; added re-export.
Panel & Provider `packages/query-devtools/src/DevtoolsPanelComponent.tsx`	Creates local signals and cache Maps, wraps the render tree with `DevtoolsStateContext.Provider`, moves `PiPProvider` inside the provider and surfaces state to descendants.
Root Devtools & Consumers `packages/query-devtools/src/Devtools.tsx`	Rewires Devtools to provide context; replaces local component-state usage with `useDevtoolsState()` across child components; updates cache subscription logic to store/invoke `{ setter, shouldUpdate }` entries.

Sequence Diagram(s)

sequenceDiagram
 autonumber
 participant Provider as DevtoolsPanelComponent (Provider)
 participant State as DevtoolsStateContext
 participant Child as Devtools Child Components
 participant Cache as Query/Mutation Cache
 Provider->>State: create signals & maps\n(selectedQueryHash, selectedMutationId,\npanelWidth, offline, queryCacheMap, mutationCacheMap)
 Provider->>Child: render children under Provider
 Child->>State: call useDevtoolsState() (read accessors/setters)
 Child->>Cache: subscribe(callbackSelector)
 Cache-->>Child: notify(event)
 alt shouldUpdate(event) is true
 Cache->>State: find map entry -> { setter, shouldUpdate }
 State->>Child: invoke setter(eventPayload)
 Child->>State: update UI state via setter
 else shouldUpdate(event) is false
 Cache->>Child: no-op
 end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

feat(devtools): allow passing a theme via prop #9887 — touches devtools internals and theme/context plumbing affecting the same panel/context files.
fix(devtools): Handle some additional query devtools accessibility findings #9961 — modifies devtools panel logic (panelWidth, selection/drag/keyboard) overlapping with state/resize handling here.

Suggested reviewers

TkDodo
AlemTuzlak

Poem

🐇 I built a snug context burrow bright,
Signals tucked in, caches held tight,
Panels listen, each one alone,
No more tangled state to roam,
Hoppity hops — devtools sleep tonight! 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: moving DevTool instance settings into a context for proper isolation, which directly addresses the core problem of multiple instances sharing state.
Description check	✅ Passed	The description is comprehensive with issue reference, clear motivation, problem explanation with examples, solution approach, visual evidence, and completed checklist items including changeset generation.

✨ Finishing touches

📝 Generate docstrings

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 and usage tips.}

@nx-cloud

Copy link

nx-cloud bot commented Dec 30, 2025 •

edited

Loading

View your CI Pipeline Execution ↗ for commit 47aa1fb

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

☁️ Nx Cloud last updated this comment at 2025年12月31日 09:51:04 UTC

@pkg-pr-new

Copy link

pkg-pr-new bot commented Dec 30, 2025 •

edited

Loading

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 47aa1fb

@gk9848970 gk9848970 mentioned this pull request

Dec 30, 2025

Query DevTools is not isolated #9681

Open

coderabbitai[bot]

coderabbitai bot reviewed

Dec 30, 2025

View reviewed changes

Copy link

Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)

.changeset/true-loops-report.md (1)
5-5: Consider rephrasing the changeset to describe the fix.

The current description states the problem rather than the solution. Consider something like: "Fix isolation issues when multiple Devtool instances share the same state" to better communicate what was changed.
🔎 Suggested improvement
-Multiple Devtool instances sharing same state causing isolation issues
+Fix isolation issues when multiple Devtool instances share the same state
packages/query-devtools/src/contexts/DevtoolsStateContext.ts (1)

9-16: Consider narrowing the Setter<any> type for better type safety.

Using Setter<any> loses type information. While this is acceptable for the current implementation since the maps store setters for heterogeneous value types, you might consider using a generic or more specific type in the future if type safety becomes important.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 167db32 and 904d076.

📒 Files selected for processing (5)

.changeset/true-loops-report.md
packages/query-devtools/src/Devtools.tsx
packages/query-devtools/src/DevtoolsPanelComponent.tsx
packages/query-devtools/src/contexts/DevtoolsStateContext.ts
packages/query-devtools/src/contexts/index.ts

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025年08月19日T03:18:18.303Z

Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025年08月19日T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.

Applied to files:

packages/query-devtools/src/contexts/index.ts
packages/query-devtools/src/contexts/DevtoolsStateContext.ts
packages/query-devtools/src/Devtools.tsx
packages/query-devtools/src/DevtoolsPanelComponent.tsx

🧬 Code graph analysis (1)

packages/query-devtools/src/DevtoolsPanelComponent.tsx (4)

packages/query-devtools/src/Devtools.tsx (1)

DevtoolsComponentType (110-112)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (3)

QueryCacheMap (18-21)

MutationCacheMap (23-26)

DevtoolsStateContext (41-41)

packages/query-devtools/src/contexts/PiPContext.tsx (1)

PiPProvider (35-192)

packages/query-devtools/src/contexts/ThemeContext.ts (1)

ThemeContext (4-6)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Test

🔇 Additional comments (12)

packages/query-devtools/src/contexts/index.ts (1)

4-4: LGTM!

The new re-export follows the existing pattern and properly exposes the DevtoolsStateContext module.

packages/query-devtools/src/DevtoolsPanelComponent.tsx (2)

20-29: LGTM!

The component correctly creates its own isolated state signals and cache maps, which are then provided through the DevtoolsStateContext.Provider. This ensures proper isolation when multiple DevtoolsPanelComponent instances are rendered.

43-73: LGTM!

The DevtoolsStateContext.Provider is correctly positioned in the component hierarchy and provides all required state properties. The disabled prop on PiPProvider is appropriate for this panel-only view.

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (2)

43-51: LGTM!

The useDevtoolsState hook correctly throws a descriptive error when used outside of the DevtoolsStateContext.Provider, following the standard pattern for required context hooks.

18-26: No action needed - this is not a concern in Solid.js.

Callbacks passed to createSubscribeToQueryCacheBatcher and createSubscribeToMutationCacheBatcher maintain stable references because they are defined at the component body level. In Solid.js, component setup code executes once during mount (unlike React where it runs on every render), so inline arrow functions retain the same reference throughout the component's lifetime. Reference equality for Map key lookups works correctly in this context.

Likely an incorrect or invalid review comment.

packages/query-devtools/src/Devtools.tsx (7)

115-124: LGTM!

The Devtools component correctly creates isolated state signals and cache maps at the component level, which are then provided to descendants via context. This ensures each Devtools instance has its own isolated state.

206-219: LGTM!

The DevtoolsStateContext.Provider correctly wraps all content that needs access to the shared state, including the PiP portal content and the main panel.

719-726: LGTM!

The ContentView component correctly uses the useDevtoolsState hook to access state from the context, destructuring only the properties it needs. This pattern is consistently applied across all components that require devtools state.

2625-2647: LGTM!

The setupQueryCacheSubscription function correctly obtains the queryCacheMap from the context, ensuring each DevTools instance has isolated cache subscriptions. The cleanup logic properly clears the map and unsubscribes.

2681-2702: LGTM!

The setupMutationCacheSubscription function follows the same pattern as the query cache subscription, correctly using the context-provided mutationCacheMap for proper isolation.

2649-2679: LGTM!

The createSubscribeToQueryCacheBatcher function correctly uses the context-provided map and properly cleans up entries via onCleanup when the component unmounts.

2704-2732: LGTM!

The createSubscribeToMutationCacheBatcher function follows the same correct pattern for context usage and cleanup.

@gk9848970 gk9848970 marked this pull request as draft

December 30, 2025 19:57

@gaurav-dt


 Size limit test

b2c6fbc

@gk9848970 gk9848970 marked this pull request as ready for review

December 30, 2025 20:01

@gk9848970 gk9848970 force-pushed the fix_isolation_of_devtools branch from 904d076 to b2c6fbc Compare

December 30, 2025 20:03

@autofix-ci


 ci: apply automated fixes

95271d3

coderabbitai[bot]

coderabbitai bot reviewed

Dec 30, 2025

View reviewed changes

Copy link

Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (1)
43-45: Consider adding a runtime check for better error messaging.

The non-null assertion (!) is TypeScript-only and doesn't provide a helpful error if the hook is used outside the DevtoolsStateContext.Provider. If a developer accidentally calls this hook outside the provider, they'll get a cryptic "Cannot destructure property of undefined" error.
🔎 Suggested improvement for better DX
 export function useDevtoolsState() {
- return useContext(DevtoolsStateContext)!
+ const context = useContext(DevtoolsStateContext)
+ if (!context) {
+ throw new Error(
+ 'useDevtoolsState must be used within a DevtoolsStateContext.Provider',
+ )
+ }
+ return context
 }

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 904d076 and 95271d3.

📒 Files selected for processing (3)

packages/query-devtools/src/Devtools.tsx
packages/query-devtools/src/DevtoolsPanelComponent.tsx
packages/query-devtools/src/contexts/DevtoolsStateContext.ts

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

packages/query-devtools/src/DevtoolsPanelComponent.tsx

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025年08月19日T03:18:18.303Z

Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025年08月19日T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.

Applied to files:

packages/query-devtools/src/Devtools.tsx
packages/query-devtools/src/contexts/DevtoolsStateContext.ts

🧬 Code graph analysis (2)

packages/query-devtools/src/Devtools.tsx (2)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (4)

QueryCacheMap (18-21)

MutationCacheMap (23-26)

DevtoolsStateContext (41-41)

useDevtoolsState (43-45)

packages/query-devtools/src/contexts/QueryDevtoolsContext.ts (1)

useQueryDevtoolsContext (45-47)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (1)

packages/svelte-query/src/types.ts (1)

Accessor (21-21)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Test

🔇 Additional comments (18)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (2)

9-26: Well-structured type definitions for cache subscription maps.

The types properly capture the setter and optional filtering behavior needed for the cache subscription batching pattern. The use of Setter<any> is acceptable here given the generic callback signatures.

28-39: Clean interface design for context state.

The DevtoolsState interface correctly exposes Solid.js reactive primitives (Accessor/Setter pairs) and cache maps, enabling proper isolation between multiple DevTools instances.

packages/query-devtools/src/Devtools.tsx (16)

54-60: Clean import organization.

The context imports are properly consolidated with the existing context imports from ./contexts.

115-124: Correct implementation of per-instance state isolation.

Each Devtools component instance creates its own signals and cache maps, ensuring proper isolation between multiple DevTools instances as intended by this PR.

206-219: Provider correctly wraps component tree with isolated state.

The DevtoolsStateContext.Provider is positioned at the root of the Devtools component tree, exposing the per-instance state to all child components.

310-310: Correct context usage.

The PiPPanel properly consumes the context for panel width state management.

437-437: Correct context usage for panel state management.

719-726: ContentView correctly accesses context state.

The component appropriately destructures the state values it needs for handling selection, offline status, and responsive layout.

1421-1421: QueryRow correctly uses context for selection state.

1552-1553: MutationRow correctly uses context for selection state.

1800-1801: QueryStatus component correctly uses context for responsive behavior.

1918-1919: QueryDetails correctly uses context for selection state.

2447-2448: MutationDetails correctly uses context for selection state.

2625-2647: Query cache subscription correctly uses context-provided map.

The subscription setup function properly accesses the instance-specific queryCacheMap from context, ensuring isolation between DevTools instances.

2681-2702: Mutation cache subscription correctly uses context-provided map.

The subscription setup function properly accesses the instance-specific mutationCacheMap from context.

2649-2679: Query cache batcher correctly uses context and proper entry structure.

The function correctly accesses queryCacheMap from context and sets entries with the expected { setter, shouldUpdate } structure.

2704-2732: Mutation cache batcher correctly uses context and proper entry structure.

The function correctly accesses mutationCacheMap from context and sets entries with the { setter } structure.

2688-2693: Correct setter invocation pattern matching the new map value structure.

The iteration correctly accesses value.setter from the map entries, aligning with the MutationCacheMapValue type.

gk9848970 and others added 4 commits

December 31, 2025 15:07

@gk9848970


 Merge branch 'main' into fix_isolation_of_devtools

e8910d4

@gaurav-dt


 Fixed

3ac1682

@gaurav-dt


 Fixed

c885998

@gaurav-dt


 Removed temp things

47aa1fb

coderabbitai[bot]

coderabbitai bot reviewed

Dec 31, 2025

View reviewed changes

Copy link

Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (1)

9-16: Consider stronger typing for setters.

The any type in Setter<any> reduces type safety. If the actual types of cached values are known or can be constrained (e.g., using generics), consider making these types more specific to catch potential type errors at compile time.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 95271d3 and 47aa1fb.

📒 Files selected for processing (1)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025年08月19日T03:18:18.303Z

Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025年08月19日T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.

Applied to files:

packages/query-devtools/src/contexts/DevtoolsStateContext.ts

🧬 Code graph analysis (1)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (1)

packages/svelte-query/src/types.ts (1)

Accessor (21-21)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Test
GitHub Check: Preview

🔇 Additional comments (3)

packages/query-devtools/src/contexts/DevtoolsStateContext.ts (3)

1-7: LGTM!

The imports are appropriate for a Solid.js context implementation managing DevTools state.

28-41: Good state interface design with Accessor/Setter pairs.

The DevtoolsState interface properly captures all instance-specific state needed for isolation. However, note that createContext<DevtoolsState>() is called without a default value, making the context undefined until a Provider supplies it. This is acceptable if the hook always runs within a Provider (see comment on lines 43-45).

18-26: No action required—function-as-key pattern is intentionally correct here.

The Map types using functions as keys are part of a subscription registry pattern that is properly implemented. Each createSubscribeToQueryCacheBatcher and createSubscribeToMutationCacheBatcher call captures its callback function in a closure, then consistently uses that same function reference for set() (line 2669), iteration (line 2631), and delete() (line 2674). Since the callback reference is stable throughout the subscription's lifetime and cleanup handlers remove entries before unmounting, there is no risk of reference mismatch. This design is sound and intentional.

packages/query-devtools/src/contexts/DevtoolsStateContext.ts

Comment on lines +43 to +45

export function useDevtoolsState() {

return useContext(DevtoolsStateContext)!

}

Copy link

Contributor

@coderabbitai coderabbitai bot Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Add runtime guard for missing context provider.

The non-null assertion (!) assumes the context is always provided, but calling this hook outside a DevtoolsStateContext.Provider will cause a runtime error when the undefined value is accessed.

🔎 Proposed fix with runtime guard

 export function useDevtoolsState() {
- return useContext(DevtoolsStateContext)!
+ const context = useContext(DevtoolsStateContext)
+ if (!context) {
+ throw new Error('useDevtoolsState must be used within a DevtoolsStateContext.Provider')
+ }
+ return context
 }

This provides a clear error message during development rather than cryptic undefined access errors at runtime.

📝 Committable suggestion

!!️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

export function useDevtoolsState() {

return useContext(DevtoolsStateContext)!

}

export function useDevtoolsState() {

const context = useContext(DevtoolsStateContext)

if (!context) {

throw new Error('useDevtoolsState must be used within a DevtoolsStateContext.Provider')

}

return context

}

🤖 Prompt for AI Agents

In packages/query-devtools/src/contexts/DevtoolsStateContext.ts around lines 43
to 45, the hook returns the context with a non-null assertion which will throw a
confusing error if used outside a Provider; add a runtime guard that checks if
the context value is undefined and throw a clear, descriptive error (e.g.
"useDevtoolsState must be used within a DevtoolsStateContext.Provider") so
callers get an explicit message during development; implement the check before
returning the value and keep types intact.

@codecov

Copy link

codecov bot commented Dec 31, 2025 •

edited

Loading

Codecov Report

❌ Patch coverage is 0% with 37 lines in your changes missing coverage. Please review.
✅ Project coverage is 20.65%. Comparing base (f616474) to head (47aa1fb).

Additional details and impacted files

Impacted file tree graph

@@ Coverage Diff @@
## main #10006 +/- ##
===========================================
- Coverage 45.82% 20.65% -25.18% 
===========================================
 Files 200 43 -157 
 Lines 8525 2489 -6036 
 Branches 1977 646 -1331 
===========================================
- Hits 3907 514 -3393 
+ Misses 4158 1727 -2431 
+ Partials 460 248 -212

Components	Coverage Δ
@tanstack/angular-query-experimental	`93.85% <ø> (ø)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`∅ <ø> (∅)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`∅ <ø> (∅)`
@tanstack/query-devtools	`3.34% <0.00%> (-0.05%)`	⬇️
@tanstack/query-persist-client-core	`∅ <ø> (∅)`
@tanstack/query-sync-storage-persister	`∅ <ø> (∅)`
@tanstack/query-test-utils	`∅ <ø> (∅)`
@tanstack/react-query	`∅ <ø> (∅)`
@tanstack/react-query-devtools	`9.25% <ø> (ø)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`∅ <ø> (∅)`
@tanstack/solid-query	`∅ <ø> (∅)`
@tanstack/solid-query-devtools	`64.17% <ø> (ø)`
@tanstack/solid-query-persist-client	`∅ <ø> (∅)`
@tanstack/svelte-query	`∅ <ø> (∅)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`∅ <ø> (∅)`
@tanstack/vue-query	`∅ <ø> (∅)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Labels

package: query-devtools

2 participants

@gk9848970 @gaurav-dt

Uh oh!

fix(devtools): Moved DevTool Instance specific settings to a context to have proper isolation #10006

Are you sure you want to change the base?

fix(devtools): Moved DevTool Instance specific settings to a context to have proper isolation #10006

Conversation

@gk9848970 gk9848970 commented Dec 30, 2025 • 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 Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

nx-cloud bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

@coderabbitai coderabbitai bot Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

@gk9848970 gk9848970 commented Dec 30, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Dec 30, 2025 •

edited

Loading

coderabbitai bot commented Dec 30, 2025 •

edited

Loading

nx-cloud bot commented Dec 30, 2025 •

edited

Loading

pkg-pr-new bot commented Dec 30, 2025 •

edited

Loading

codecov bot commented Dec 31, 2025 •

edited

Loading