diff --git a/.changeset/friendly-queries-hide.md b/.changeset/friendly-queries-hide.md new file mode 100644 index 00000000000..d68b86eacbf --- /dev/null +++ b/.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. diff --git a/docs/framework/angular/devtools.md b/docs/framework/angular/devtools.md index 0103213a350..3d35b3e1d13 100644 --- a/docs/framework/angular/devtools.md +++ b/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. diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx index daff934932f..ddd66880539 100644 --- a/packages/query-devtools/src/Devtools.tsx +++ b/packages/query-devtools/src/Devtools.tsx @@ -694,6 +694,12 @@ export const ContentView: Component = (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 = (props) => { props.localStore.filter, sort(), sortOrder(), - props.localStore.hideDisabledQueries, + hideDisabledQueries(), ], () => { const curr = query_cache().getAll() @@ -742,7 +748,7 @@ export const ContentView: Component = (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 = (props) => { )} > props.setLocalStore('hideDisabledQueries', value) @@ -1297,11 +1303,7 @@ export const ContentView: Component = (props) => { )} > Show - + @@ -1314,11 +1316,7 @@ export const ContentView: Component = (props) => { )} > Hide - + diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index b53aefbaacd..2d544a8e4c3 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/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'],