fix(devtools): fix crash with custom queryKeyHashFn and async persistence

[lihan3238]

Summary

When using async persistence (e.g. IndexedDB) combined with a custom queryKeyHashFn, the DevTools crash on initial load with:

TypeError: Cannot read properties of undefined (reading 'fetchStatus')

The root cause is that queryCache.find({ queryKey }) internally uses the default hashQueryKey to compute the hash and match queries. When a custom queryKeyHashFn is configured, this computed hash won't match the query's actual hash in the cache, so find() returns undefined.

Fix

Replaced queryCache.find({ queryKey: props.query.queryKey }) calls with queryCache.get(props.query.queryHash) in the DevTools query detail component. The get() method looks up queries directly by their already-computed hash string, which correctly finds the query regardless of which hash function was used.

The props.query.queryHash is already available in this component since each query entry in the DevTools list carries its queryHash.

Closes #6958

Test plan

• Verified the fix targets the correct queryCache().find() calls that use queryKey matching
• Manual testing with a custom queryKeyHashFn and async persistence (IndexedDB) recommended

Summary by CodeRabbit

• Refactor
  • Optimized query resolution in the DevTools to improve performance and responsiveness when retrieving and displaying query state information.

[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: f96419d0-1e3c-4386-85a8-57bc545e508e

📥 Commits

Reviewing files that changed from the base of the PR and between 0d8d64b and e157250.

📒 Files selected for processing (1)

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

---

📝 Walkthrough

Walkthrough

The DevTools query-row component switches from queryCache().find({ queryKey }) to queryCache().get(queryHash) when resolving query state, observers, and related flags. This respects custom queryKeyHashFn configurations during async persistence.

Changes

DevTools Query Lookup

Layer / File(s)	Summary
Query State Resolution packages/query-devtools/src/Devtools.tsx	QueryRow now resolves queries directly by queryHash instead of searching by queryKey. The get() method respects custom hash functions, fixing crashes when using async persistence with a custom queryKeyHashFn. Cache lookups for queryState, isDisabled, isStatic, isStale, and observers now use the provided hash and include ?? false/?? 0 fallbacks.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

---

🐰 A fix hops into the light,
Custom hashes now work just right!
DevTools won't crash when caches persist,
With queryHash lookups—a bug-fix grist!
Persistence and custom keys—no more fright! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: fixing a DevTools crash with custom queryKeyHashFn and async persistence, matching the core objective of the PR.
Description check	✅ Passed	The description provides sufficient context (summary, fix explanation, and test plan), though the provided PR description does not match the template format, it covers the essential information needed.
Linked Issues check	✅ Passed	The changes directly address the root cause identified in #6958 by replacing queryCache.find({ queryKey }) with queryCache.get(queryHash), which correctly handles custom queryKeyHashFn.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the DevTools crash with custom queryKeyHashFn; no unrelated modifications are present in the changeset.
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.}