Skip to content

Fix devtools query rows with mutable keys#10750

Merged
TkDodo merged 3 commits into
TanStack:mainfrom
puneetdixit200:fix-devtools-production-query-client
May 24, 2026
Merged

Fix devtools query rows with mutable keys#10750
TkDodo merged 3 commits into
TanStack:mainfrom
puneetdixit200:fix-devtools-production-query-client

Conversation

@puneetdixit200
Copy link
Copy Markdown
Contributor

@puneetdixit200 puneetdixit200 commented May 22, 2026

Changes

Fixes #10744.

Query rows now resolve their live cache entry by the stable queryHash instead of recomputing a lookup from queryKey. This keeps the devtools row rendering stable when an object inside a query key is mutated in place, which could otherwise make the row state lookup return undefined and crash while reading fetchStatus.

Added a regression test that mutates an object query key after the query is cached and verifies the row still renders.

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

    • Devtools query rows now reliably display correct query labels and status when object-based query keys are mutated after creation, preventing incorrect or missing rows.
  • Tests

    • Added test coverage verifying Devtools renders query rows correctly when object-based query keys are mutated.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 22, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a3206e59-2659-4b57-b3d4-7e4b961a04a8

📥 Commits

Reviewing files that changed from the base of the PR and between e9bd43f and 94c835e.

📒 Files selected for processing (1)
  • packages/query-devtools/src/Devtools.tsx

📝 Walkthrough

Walkthrough

Query-devtools QueryRow subscriptions switch from queryKey-based lookups to queryHash-based lookups when retrieving query state, status, and observer counts. A new test verifies Devtools renders queries correctly when object-based query keys are mutated after creation. The changeset documents this patch release.

Changes

Query-devtools hash-based lookup

Layer / File(s) Summary
Query row lookup refactor
packages/query-devtools/src/Devtools.tsx, packages/query-devtools/src/__tests__/Devtools.test.tsx
QueryRow subscriptions now retrieve state, isDisabled, isStatic, isStale, and observer counts via queryCache().get(queryHash) instead of queryCache().find({ queryKey }). New test case verifies Devtools renders query rows when object-based query keys are mutated in place.
Changeset documentation
.changeset/stable-devtools-query-rows.md
Patch release entry documents that query rows are now resolved from stable query hash to prevent rendering failures when object-based query keys contain mutated properties.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • TanStack/query#10748: Both PRs touch devtools query-row behavior and test coverage for "disabled and static queries"; related to deriving per-query status from the cache.

Suggested labels

package: query-devtools

Poem

🐰 I nibble code where hashes grow,
Stable threads keep row seeds sown,
Keys may bend and objects stray,
But queryHash will show the way,
Hopping on—devtools safe and known.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Fix devtools query rows with mutable keys' clearly and concisely summarizes the main change: fixing devtools rendering when query key objects are mutated.
Description check ✅ Passed The description covers all required sections: Changes section explains the fix and references the linked issue, Checklist is completed, and Release Impact is properly marked.
Linked Issues check ✅ Passed The code changes directly address issue #10744 by using stable queryHash lookups instead of recomputed queryKey lookups, preventing crashes when objects inside query keys are mutated.
Out of Scope Changes check ✅ Passed All changes are directly scoped to fixing issue #10744: modifying Devtools.tsx to use queryHash, adding a regression test, and updating the changeset metadata.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 24, 2026

View your CI Pipeline Execution ↗ for commit e9bd43f

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

☁️ Nx Cloud last updated this comment at 2026-05-24 11:11:51 UTC

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 24, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 94c835e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cannot read properties of undefined (reading 'fetchStatus')

2 participants