fix(query-devtools): honor hideDisabledQueries option

.changeset/friendly-queries-hide.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/query-devtools": patch
+---
+
+Honor the hideDisabledQueries option when no saved visibility preference exists. Keep the settings menu consistent with the effective preference.

docs/framework/angular/devtools.md

@@ -161,7 +161,7 @@ Of these options `loadDevtools`, `client`, `position`, `errorTypes`, `buttonPosi
   - Default behavior will apply the devtool's styles to the head tag within the DOM.
   - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
 - `hideDisabledQueries?: boolean`
-  - Set this to true to hide disabled queries from the devtools panel.
+  - Set this to true to hide disabled queries from the devtools panel by default. A saved Show/Hide preference from the devtools settings takes precedence.
 - `theme?: "light" | "dark" | "system"`
   - Defaults to `system`.
   - Set this to change the theme of the devtools panel.

packages/query-devtools/src/Devtools.tsx

@@ -694,6 +694,12 @@ export const ContentView: Component<ContentViewProps> = (props) => {
     () => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER,
   ) as () => 1 | -1
 
+  const hideDisabledQueries = createMemo(() =>
+    props.localStore.hideDisabledQueries == null
+      ? (useQueryDevtoolsContext().hideDisabledQueries ?? false)
+      : props.localStore.hideDisabledQueries === 'true',
+  )
+
   const mutationSort = createMemo(
     () => props.localStore.mutationSort || DEFAULT_MUTATION_SORT_FN_NAME,
   )
@@ -729,7 +735,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
         props.localStore.filter,
         sort(),
         sortOrder(),
-        props.localStore.hideDisabledQueries,
+        hideDisabledQueries(),
       ],
       () => {
         const curr = query_cache().getAll()
@@ -742,7 +748,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())
         }
 
@@ -1282,7 +1288,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                         )}
                       >
                         <DropdownMenu.RadioGroup
-                          value={props.localStore.hideDisabledQueries}
+                          value={String(hideDisabledQueries())}
                           aria-label="Hide disabled queries setting"
                           onChange={(value) =>
                             props.setLocalStore('hideDisabledQueries', value)
@@ -1297,11 +1303,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                             )}
                           >
                             <span>Show</span>
-                            <Show
-                              when={
-                                props.localStore.hideDisabledQueries !== 'true'
-                              }
-                            >
+                            <Show when={!hideDisabledQueries()}>
                               <CheckCircle />
                             </Show>
                           </DropdownMenu.RadioItem>
@@ -1314,11 +1316,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

@@ -998,6 +998,43 @@ describe('Devtools', () => {
       )
     })
 
+    it.each([
+      { option: true, saved: undefined, hidden: true },
+      { option: false, saved: undefined, hidden: false },
+      { option: undefined, saved: undefined, hidden: false },
+      { option: true, saved: 'false', hidden: false },
+      { option: false, saved: 'true', hidden: true },
+    ])(
+      'uses hideDisabledQueries=$option with saved preference $saved',
+      ({ option, saved, hidden }) => {
+        const observer = new QueryObserver(queryClient, {
+          queryKey: ['disabled-option'],
+          queryFn: () => 'disabled',
+          enabled: false,
+        })
+        const unsubscribe = observer.subscribe(() => {})
+        queryClient.setQueryData(['disabled-option'], 'disabled')
+        queryClient.setQueryData(['visible-option'], 'visible')
+
+        try {
+          const rendered = renderDevtools(
+            { initialIsOpen: true, hideDisabledQueries: option },
+            saved === undefined
+              ? {}
+              : { 'TanstackQueryDevtools.hideDisabledQueries': saved },
+          )
+          expect(
+            rendered.queryByLabelText(/Query key \["disabled-option"\]/) === null,
+          ).toBe(hidden)
+          expect(
+            rendered.getByLabelText(/Query key \["visible-option"\]/),
+          ).toBeInTheDocument()
+        } finally {
+          unsubscribe()
+        }
+      },
+    )
+
     it('should hide disabled queries when "hideDisabledQueries" is enabled in localStorage', () => {
       const disabled = new QueryObserver(queryClient, {
         queryKey: ['hide-test-disabled'],