fix(query-devtools): look up selected queries by hash

[raashish1601]

Summary

• look up the selected devtools query with queryCache.get(queryHash)
• reuse that lookup for query details state, status, and observer count
• add coverage for opening details when a query uses a custom queryKeyHashFn

Why

Devtools already stores the selected query by hash. Looking it up directly avoids repeatedly scanning the cache and aligns the details pane with the lower-level hash lookup suggested in #6958.

Fixes#6958.

Tests

• pnpm exec eslint packages/query-devtools/src/Devtools.tsx packages/query-devtools/src/__tests__/Devtools.test.tsx
• pnpm exec prettier --check packages/query-devtools/src/Devtools.tsx packages/query-devtools/src/__tests__/Devtools.test.tsx
• git diff --check
• pnpm --filter @tanstack/query-devtools build

Package-local checks that are currently blocked in this Windows checkout:

• pnpm --filter @tanstack/query-devtools test:lib -- src/__tests__/Devtools.test.tsx --coverage.enabled=false fails before running the devtools suite with file:///@solid-refresh
• pnpm --filter @tanstack/query-devtools test:types:tscurrent fails because symlink forwarding files such as root.eslint.config.js are checked out as plain text (../../eslint.config.js) and TypeScript tries to parse them

Summary by CodeRabbit

• Refactoring

  • Improved DevTools query selection internals to make query detail behavior more reliable and responsive.

• Tests

  • Added coverage to ensure the Query Details panel opens correctly when clicking a query key label, including cases with custom query key hashing.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: aab0df65-0f11-4747-b77a-7dd52e88c559

📥 Commits

Reviewing files that changed from the base of the PR and between 7aee876 and 25969ea.

📒 Files selected for processing (1)

• packages/query-devtools/src/Devtools.tsx

---

📝 Walkthrough

Walkthrough

QueryDetails selection was refactored to use a shared getSelectedQuery(queryCache) that resolves the selected query by selectedQueryHash(); seven reactive subscriptions were updated to use it. A test was added verifying Query Details opens for queries built with a custom queryKeyHashFn.

Changes

DevTools query selection refactor

Layer / File(s)	Summary
Shared query lookup helper and subscription refactor packages/query-devtools/src/Devtools.tsx	Adds getSelectedQuery(queryCache) and updates seven createSubscribeToQueryCacheBatcher subscriptions to use it instead of inline queryCache().getAll().find(...) lookups.
Custom queryKeyHashFn query details test packages/query-devtools/src/__tests__/Devtools.test.tsx	Adds a test that builds a query with a custom queryKeyHashFn, clicks its generated label, and asserts the "Query Details" panel is shown.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• TanStack/query#10748: Adds DevTools UI tests that exercise query-row and query-details selection/rendering paths.
• TanStack/query#10750: Also refactors DevTools query lookup to rely on stable hash-based identification and updates tests around hashing/selection.

Suggested labels

package: query-devtools

Suggested reviewers

• TkDodo

Poem

🐰 A tiny rabbit hops the stack,
Finds selected queries on the track,
Hashes safe, no more a grind,
DevTools peeks the right one this time,
Tests applaud — the trees unstack! 🌿

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(query-devtools): look up selected queries by hash' accurately and specifically describes the main refactoring change: replacing inline cache scans with a hash-based lookup helper.
Description check	✅ Passed	The PR description provides a clear summary of changes, explains the motivation with issue reference, lists specific verification steps (ESLint, Prettier, build checks), and acknowledges known blockers on the contributor's system.
Linked Issues check	✅ Passed	The PR addresses issue #6958 by implementing hash-based query lookup instead of repeated cache scans, which resolves the crash when using async persistence with custom queryKeyHashFn. New test coverage validates the fix for custom hash functions.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the issue: the refactoring in Devtools.tsx optimizes query lookups via hash, and the test addition validates custom queryKeyHashFn support, with no unrelated modifications present.
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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/query-devtools/src/Devtools.tsx`:
- Around line 1865-1873: The two subscriptions use the same function reference
(getSelectedQuery) so createSubscribeToQueryCacheBatcher stores them under the
same key and the second call overwrites the first; fix by passing distinct
callback references (e.g., wrap getSelectedQuery in a small arrow or named
wrapper) when creating activeQuery and activeQueryFresh so
queryCacheMap.set(callback, ...) receives unique keys; update the calls to
createSubscribeToQueryCacheBatcher for activeQuery and activeQueryFresh to use
those wrapped functions instead of the raw getSelectedQuery.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 856f77f6-c94d-4674-9a4f-b11a81d64357

📥 Commits

Reviewing files that changed from the base of the PR and between 63b3a72 and 7aee876.

📒 Files selected for processing (2)

• packages/query-devtools/src/Devtools.tsx
• packages/query-devtools/src/__tests__/Devtools.test.tsx