Fix devtools query rows with mutable keys

.changeset/stable-devtools-query-rows.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/query-devtools": patch
+---
+
+Resolve devtools query rows from their stable query hash so mutated object query keys do not break row rendering.

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,
   )

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

@@ -374,6 +374,18 @@ describe('Devtools', () => {
       expect(rendered.getByText('static')).toBeInTheDocument()
       expect(rendered.getByLabelText(/, static/)).toBeInTheDocument()
     })
+
+    it('should render a query row when an object query key is mutated in place', () => {
+      const filters = { page: 1 }
+      queryClient.setQueryData(['mutable-key', filters], 'x')
+      filters.page = 2
+
+      const rendered = renderDevtools({ initialIsOpen: true })
+
+      expect(
+        rendered.getByLabelText(/Query key \["mutable-key",\{"page":1\}\]/),
+      ).toBeInTheDocument()
+    })
   })
 
   describe('status counts', () => {