fix(query-devtools/Devtools): apply the 'hideDisabledQueries' prop to the query list

.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

packages/query-devtools/src/Devtools.tsx

@@ -726,14 +726,22 @@ 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(
       () => [
         queryCount(),
         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>

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

@@ -990,6 +990,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', () => {