Fix devtools query rows with mutable keys (#10750)

puneetdixit200 · TkDodo · autofix-ci[bot] · web-flow · commit e631dc3fa17b · 2026-05-24T15:02:26.000+02:00
* Fix devtools query rows with mutable keys

* ci: apply automated fixes

---------

Co-authored-by: puneetdixit200 &lt;236133619+puneetdixit200@users.noreply.github.com&gt;
Co-authored-by: Dominik Dorfmeister 🔮 &lt;office@dorfmeister.cc&gt;
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/.changeset/stable-devtools-query-rows.md b/.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.
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
@@ -1384,54 +1384,34 @@ 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) => 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,
   )
diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx
@@ -390,6 +390,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('picture-in-picture', () => {

-Original file line number
+Diff line change
@@ @@ -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.