From bb3fba8095f96a787a90ed6cd3d69a0a51a7a773 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Fri, 25 Sep 2026 17:09:18 +0900
Subject: [PATCH] fix(query-devtools/Devtools): apply the 'hideDisabledQueries'
 prop to the query list

---
 ...ery-devtools-hide-disabled-queries-prop.md |  5 ++
 packages/query-devtools/src/Devtools.tsx      | 26 +++++-----
 .../src/__tests__/Devtools.test.tsx           | 49 +++++++++++++++++++
 3 files changed, 67 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/query-devtools-hide-disabled-queries-prop.md

diff --git a/.changeset/query-devtools-hide-disabled-queries-prop.md b/.changeset/query-devtools-hide-disabled-queries-prop.md
new file mode 100644
index 00000000000..4d786a089f7
--- /dev/null
+++ b/.changeset/query-devtools-hide-disabled-queries-prop.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+fix(query-devtools/Devtools): apply the 'hideDisabledQueries' prop to the query list
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index c19022e6312..20fa268a452 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -726,6 +726,14 @@ export const ContentView: Component<ContentViewProps> = (props) => {
     return queryCache().getAll().length
   }, false)
 
+  const hideDisabledQueries = createMemo(() => {
+    return props.localStore.hideDisabledQueries === 'true'
+      ? true
+      : props.localStore.hideDisabledQueries === 'false'
+        ? false
+        : useQueryDevtoolsContext().hideDisabledQueries || false
+  })
+
   const queries = createMemo(
     on(
       () => [
@@ -733,7 +741,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
         props.localStore.filter,
         sort(),
         sortOrder(),
-        props.localStore.hideDisabledQueries,
+        hideDisabledQueries(),
       ],
       () => {
         const curr = query_cache().getAll()
@@ -746,7 +754,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
           : [...curr]
 
         // Filter out disabled queries if hideDisabledQueries is enabled
-        if (props.localStore.hideDisabledQueries === 'true') {
+        if (hideDisabledQueries()) {
           filtered = filtered.filter((item) => !item.isDisabled())
         }
 
@@ -1286,7 +1294,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                         )}
                       >
                         <DropdownMenu.RadioGroup
-                          value={props.localStore.hideDisabledQueries}
+                          value={hideDisabledQueries() ? 'true' : 'false'}
                           aria-label="Hide disabled queries setting"
                           onChange={(value) =>
                             props.setLocalStore('hideDisabledQueries', value)
@@ -1301,11 +1309,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                             )}
                           >
                             <span>Show</span>
-                            <Show
-                              when={
-                                props.localStore.hideDisabledQueries !== 'true'
-                              }
-                            >
+                            <Show when={!hideDisabledQueries()}>
                               <CheckCircle />
                             </Show>
                           </DropdownMenu.RadioItem>
@@ -1318,11 +1322,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                             )}
                           >
                             <span>Hide</span>
-                            <Show
-                              when={
-                                props.localStore.hideDisabledQueries === 'true'
-                              }
-                            >
+                            <Show when={hideDisabledQueries()}>
                               <CheckCircle />
                             </Show>
                           </DropdownMenu.RadioItem>
diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx
index b53aefbaacd..46285631d23 100644
--- a/packages/query-devtools/src/__tests__/Devtools.test.tsx
+++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx
@@ -1024,6 +1024,55 @@ describe('Devtools', () => {
         unsubscribe()
       }
     })
+    it('should hide disabled queries when the "hideDisabledQueries" prop is true', () => {
+      const disabled = new QueryObserver(queryClient, {
+        queryKey: ['hide-prop-disabled'],
+        queryFn: () => 'x',
+        enabled: false,
+      })
+      const unsubscribe = disabled.subscribe(() => {})
+      queryClient.setQueryData(['hide-prop-disabled'], 'x')
+      queryClient.setQueryData(['hide-prop-active'], 'y')
+
+      try {
+        const rendered = renderDevtools({
+          initialIsOpen: true,
+          hideDisabledQueries: true,
+        })
+
+        expect(
+          rendered.queryByLabelText(/Query key \["hide-prop-disabled"\]/),
+        ).not.toBeInTheDocument()
+        expect(
+          rendered.getByLabelText(/Query key \["hide-prop-active"\]/),
+        ).toBeInTheDocument()
+      } finally {
+        unsubscribe()
+      }
+    })
+
+    it('should prefer the "hideDisabledQueries" setting in localStorage over the prop', () => {
+      const disabled = new QueryObserver(queryClient, {
+        queryKey: ['hide-override-disabled'],
+        queryFn: () => 'x',
+        enabled: false,
+      })
+      const unsubscribe = disabled.subscribe(() => {})
+      queryClient.setQueryData(['hide-override-disabled'], 'x')
+
+      try {
+        const rendered = renderDevtools(
+          { initialIsOpen: true, hideDisabledQueries: true },
+          { 'TanstackQueryDevtools.hideDisabledQueries': 'false' },
+        )
+
+        expect(
+          rendered.getByLabelText(/Query key \["hide-override-disabled"\]/),
+        ).toBeInTheDocument()
+      } finally {
+        unsubscribe()
+      }
+    })
   })
 
   describe('sort order', () => {