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

packages/query-devtools/src/Devtools.tsx

@@ -1853,64 +1853,49 @@ const QueryDetails = () => {
   const [restoringLoading, setRestoringLoading] = createSignal(false)
   const [dataMode, setDataMode] = createSignal<'view' | 'edit'>('view')
   const [dataEditError, setDataEditError] = createSignal<boolean>(false)
+  const getSelectedQuery = (queryCache: Accessor<QueryCache>) => {
+    const queryHash = selectedQueryHash()
+    return queryHash ? queryCache().get(queryHash) : undefined
+  }
 
   const errorTypes = createMemo(() => {
     return useQueryDevtoolsContext().errorTypes || []
   })
 
   const activeQuery = createSubscribeToQueryCacheBatcher(
-    (queryCache) =>
-      queryCache()
-        .getAll()
-        .find((query) => query.queryHash === selectedQueryHash()),
+    (queryCache) => getSelectedQuery(queryCache),
     false,
   )
 
-  const activeQueryFresh = createSubscribeToQueryCacheBatcher((queryCache) => {
-    return queryCache()
-      .getAll()
-      .find((query) => query.queryHash === selectedQueryHash())
-  }, false)
+  const activeQueryFresh = createSubscribeToQueryCacheBatcher(
+    (queryCache) => getSelectedQuery(queryCache),
+    false,
+  )
 
   const activeQueryState = createSubscribeToQueryCacheBatcher(
-    (queryCache) =>
-      queryCache()
-        .getAll()
-        .find((query) => query.queryHash === selectedQueryHash())?.state,
+    (queryCache) => getSelectedQuery(queryCache)?.state,
     false,
   )
 
   const activeQueryStateData = createSubscribeToQueryCacheBatcher(
-    (queryCache) => {
-      return queryCache()
-        .getAll()
-        .find((query) => query.queryHash === selectedQueryHash())?.state.data
-    },
+    (queryCache) => getSelectedQuery(queryCache)?.state.data,
     false,
   )
 
   const statusLabel = createSubscribeToQueryCacheBatcher((queryCache) => {
-    const query = queryCache()
-      .getAll()
-      .find((q) => q.queryHash === selectedQueryHash())
+    const query = getSelectedQuery(queryCache)
     if (!query) return 'inactive'
     return getQueryStatusLabel(query)
   })
 
   const queryStatus = createSubscribeToQueryCacheBatcher((queryCache) => {
-    const query = queryCache()
-      .getAll()
-      .find((q) => q.queryHash === selectedQueryHash())
+    const query = getSelectedQuery(queryCache)
     if (!query) return 'pending'
     return query.state.status
   })
 
   const observerCount = createSubscribeToQueryCacheBatcher(
-    (queryCache) =>
-      queryCache()
-        .getAll()
-        .find((query) => query.queryHash === selectedQueryHash())
-        ?.getObserversCount() ?? 0,
+    (queryCache) => getSelectedQuery(queryCache)?.getObserversCount() ?? 0,
   )
 
   const color = createMemo(() => getQueryStatusColorByLabel(statusLabel()))

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

@@ -402,6 +402,22 @@ describe('Devtools', () => {
         rendered.getByLabelText(/Query key \["mutable-key",\{"page":1\}\]/),
       ).toBeInTheDocument()
     })
+
+    it('should render query details for a custom query hash', () => {
+      const query = queryClient.getQueryCache().build(queryClient, {
+        queryKey: ['custom-query-hash'],
+        queryFn: () => 'x',
+        queryKeyHashFn: () => 'custom-query-hash-value',
+      })
+      query.setData('x')
+      const rendered = renderDevtools({ initialIsOpen: true })
+
+      fireEvent.click(
+        rendered.getByLabelText('Query key custom-query-hash-value'),
+      )
+
+      expect(rendered.getByText('Query Details')).toBeInTheDocument()
+    })
   })
 
   describe('picture-in-picture', () => {