From e157250b365c1c1c8541ddfd7a7dd9c56a1b1523 Mon Sep 17 00:00:00 2001
From: lihan3238 <lihan3238@163.com>
Date: Tue, 5 May 2026 23:40:17 +0800
Subject: [PATCH] fix(devtools): fix crash with custom queryKeyHashFn and async
 persistence

When using async persistence (e.g. IndexedDB) combined with a custom
`queryKeyHashFn`, the DevTools would crash with
`TypeError: Cannot read properties of undefined (reading 'fetchStatus')`.

The root cause is that `queryCache.find({ queryKey })` uses the default
`hashQueryKey` internally to match queries, which fails when a custom
`queryKeyHashFn` is configured. Replace these calls with
`queryCache.get(queryHash)` which looks up queries directly by their
already-computed hash, bypassing the hash mismatch issue.

Closes #6958
---
 packages/query-devtools/src/Devtools.tsx | 29 ++++--------------------
 1 file changed, 5 insertions(+), 24 deletions(-)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 8e9b1f4a321..2d5fe0993b3 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1384,54 +1384,35 @@ const QueryRow: Component<{ query: Query }> = (props) => {
   const t = (light: string, dark: string) => (theme() === 'dark' ? dark : light)
 
   const queryState = createSubscribeToQueryCacheBatcher(
-    (queryCache) =>
-      queryCache().find({
-        queryKey: props.query.queryKey,
-      })?.state,
+    (queryCache) => queryCache().get(props.query.queryHash)?.state,
     true,
     (e) => e.query.queryHash === props.query.queryHash,
   )
 
   const isDisabled = createSubscribeToQueryCacheBatcher(
     (queryCache) =>
-      queryCache()
-        .find({
-          queryKey: props.query.queryKey,
-        })
-        ?.isDisabled() ?? false,
+      queryCache().get(props.query.queryHash)?.isDisabled() ?? false,
     true,
     (e) => e.query.queryHash === props.query.queryHash,
   )
 
   const isStatic = createSubscribeToQueryCacheBatcher(
     (queryCache) =>
-      queryCache()
-        .find({
-          queryKey: props.query.queryKey,
-        })
-        ?.isStatic() ?? false,
+      queryCache().get(props.query.queryHash)?.isStatic() ?? false,
     true,
     (e) => e.query.queryHash === props.query.queryHash,
   )
 
   const isStale = createSubscribeToQueryCacheBatcher(
     (queryCache) =>
-      queryCache()
-        .find({
-          queryKey: props.query.queryKey,
-        })
-        ?.isStale() ?? false,
+      queryCache().get(props.query.queryHash)?.isStale() ?? false,
     true,
     (e) => e.query.queryHash === props.query.queryHash,
   )
 
   const observers = createSubscribeToQueryCacheBatcher(
     (queryCache) =>
-      queryCache()
-        .find({
-          queryKey: props.query.queryKey,
-        })
-        ?.getObserversCount() ?? 0,
+      queryCache().get(props.query.queryHash)?.getObserversCount() ?? 0,
     true,
     (e) => e.query.queryHash === props.query.queryHash,
   )