@tanstack/query-devtools 5.83.1 → 5.84.0

package/build/index.d.cts

@@ -25,6 +25,7 @@ interface QueryDevtoolsProps {
     errorTypes?: Array<DevtoolsErrorType>;
     shadowDOMTarget?: ShadowRoot;
     onClose?: () => unknown;
+    hideDisabledQueries?: boolean;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {

package/build/index.d.ts

@@ -25,6 +25,7 @@ interface QueryDevtoolsProps {
     errorTypes?: Array<DevtoolsErrorType>;
     shadowDOMTarget?: ShadowRoot;
     onClose?: () => unknown;
+    hideDisabledQueries?: boolean;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {

package/build/index.js

@@ -13,6 +13,7 @@ var TanstackQueryDevtools = class {
   #position;
   #initialIsOpen;
   #errorTypes;
+  #hideDisabledQueries;
   #Component;
   #dispose;
   constructor(config) {
@@ -26,7 +27,8 @@ var TanstackQueryDevtools = class {
       initialIsOpen,
       errorTypes,
       styleNonce,
-      shadowDOMTarget
+      shadowDOMTarget,
+      hideDisabledQueries
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -38,6 +40,7 @@ var TanstackQueryDevtools = class {
     this.#position = createSignal(position);
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
+    this.#hideDisabledQueries = createSignal(hideDisabledQueries);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -64,12 +67,13 @@ var TanstackQueryDevtools = class {
       const [pos] = this.#position;
       const [isOpen] = this.#initialIsOpen;
       const [errors] = this.#errorTypes;
+      const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       let Devtools;
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./DevtoolsComponent/JH472VU3.js'));
+        Devtools = lazy(() => import('./DevtoolsComponent/LNWAZHJI.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -101,6 +105,9 @@ var TanstackQueryDevtools = class {
         },
         get errorTypes() {
           return errors();
+        },
+        get hideDisabledQueries() {
+          return hideDisabledQueries();
         }
       }));
     }, el);
@@ -129,6 +136,7 @@ var TanstackQueryDevtoolsPanel = class {
   #position;
   #initialIsOpen;
   #errorTypes;
+  #hideDisabledQueries;
   #onClose;
   #Component;
   #dispose;
@@ -144,7 +152,8 @@ var TanstackQueryDevtoolsPanel = class {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      onClose
+      onClose,
+      hideDisabledQueries
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -156,6 +165,7 @@ var TanstackQueryDevtoolsPanel = class {
     this.#position = createSignal(position);
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
+    this.#hideDisabledQueries = createSignal(hideDisabledQueries);
     this.#onClose = createSignal(onClose);
   }
   setButtonPosition(position) {
@@ -186,13 +196,14 @@ var TanstackQueryDevtoolsPanel = class {
       const [pos] = this.#position;
       const [isOpen] = this.#initialIsOpen;
       const [errors] = this.#errorTypes;
+      const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       const [onClose] = this.#onClose;
       let Devtools;
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./DevtoolsPanelComponent/OPQFORGE.js'));
+        Devtools = lazy(() => import('./DevtoolsPanelComponent/MWZ6AO7Z.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -225,6 +236,9 @@ var TanstackQueryDevtoolsPanel = class {
         get errorTypes() {
           return errors();
         },
+        get hideDisabledQueries() {
+          return hideDisabledQueries();
+        },
         get onClose() {
           return onClose();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.83.1",
+  "version": "5.84.0",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",

package/src/Devtools.tsx

@@ -659,17 +659,28 @@ export const ContentView: Component<ContentViewProps> = (props) => {
 
   const queries = createMemo(
     on(
-      () => [queryCount(), props.localStore.filter, sort(), sortOrder()],
+      () => [
+        queryCount(),
+        props.localStore.filter,
+        sort(),
+        sortOrder(),
+        props.localStore.hideDisabledQueries,
+      ],
       () => {
         const curr = query_cache().getAll()
 
-        const filtered = props.localStore.filter
+        let filtered = props.localStore.filter
           ? curr.filter(
               (item) =>
                 rankItem(item.queryHash, props.localStore.filter || '').passed,
             )
           : [...curr]
 
+        // Filter out disabled queries if hideDisabledQueries is enabled
+        if (props.localStore.hideDisabledQueries === 'true') {
+          filtered = filtered.filter((item) => !item.isDisabled())
+        }
+
         const sorted = sortFn()
           ? filtered.sort((a, b) => sortFn()!(a, b) * sortOrder())
           : filtered
@@ -1186,6 +1197,78 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                       </DropdownMenu.SubContent>
                     </DropdownMenu.Portal>
                   </DropdownMenu.Sub>
+                  <DropdownMenu.Sub overlap gutter={8} shift={-4}>
+                    <DropdownMenu.SubTrigger
+                      class={cx(
+                        styles().settingsSubTrigger,
+                        'tsqd-settings-menu-sub-trigger',
+                        'tsqd-settings-menu-sub-trigger-disabled-queries',
+                      )}
+                    >
+                      <span>Disabled Queries</span>
+                      <ChevronDown />
+                    </DropdownMenu.SubTrigger>
+                    <DropdownMenu.Portal
+                      ref={(el) => setComputedVariables(el as HTMLDivElement)}
+                      mount={
+                        pip().pipWindow
+                          ? pip().pipWindow!.document.body
+                          : document.body
+                      }
+                    >
+                      <DropdownMenu.SubContent
+                        class={cx(
+                          styles().settingsMenu,
+                          'tsqd-settings-submenu',
+                        )}
+                      >
+                        <DropdownMenu.Item
+                          onSelect={() => {
+                            props.setLocalStore('hideDisabledQueries', 'false')
+                          }}
+                          as="button"
+                          class={cx(
+                            styles().settingsSubButton,
+                            props.localStore.hideDisabledQueries !== 'true' &&
+                              styles().themeSelectedButton,
+                            'tsqd-settings-menu-position-btn',
+                            'tsqd-settings-menu-position-btn-show',
+                          )}
+                        >
+                          <span>Show</span>
+                          <Show
+                            when={
+                              props.localStore.hideDisabledQueries !== 'true'
+                            }
+                          >
+                            <CheckCircle />
+                          </Show>
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item
+                          onSelect={() => {
+                            props.setLocalStore('hideDisabledQueries', 'true')
+                          }}
+                          as="button"
+                          class={cx(
+                            styles().settingsSubButton,
+                            props.localStore.hideDisabledQueries === 'true' &&
+                              styles().themeSelectedButton,
+                            'tsqd-settings-menu-position-btn',
+                            'tsqd-settings-menu-position-btn-hide',
+                          )}
+                        >
+                          <span>Hide</span>
+                          <Show
+                            when={
+                              props.localStore.hideDisabledQueries === 'true'
+                            }
+                          >
+                            <CheckCircle />
+                          </Show>
+                        </DropdownMenu.Item>
+                      </DropdownMenu.SubContent>
+                    </DropdownMenu.Portal>
+                  </DropdownMenu.Sub>
                 </DropdownMenu.Content>
               </DropdownMenu.Portal>
             </DropdownMenu.Root>

package/src/TanstackQueryDevtools.tsx

@@ -31,6 +31,7 @@ class TanstackQueryDevtools {
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
   #errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
+  #hideDisabledQueries: Signal<boolean | undefined>
   #Component: DevtoolsComponentType | undefined
   #dispose?: () => void
 
@@ -46,6 +47,7 @@ class TanstackQueryDevtools {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
+      hideDisabledQueries,
     } = config
     this.#client = createSignal(client)
     this.#queryFlavor = queryFlavor
@@ -57,6 +59,7 @@ class TanstackQueryDevtools {
     this.#position = createSignal(position)
     this.#initialIsOpen = createSignal(initialIsOpen)
     this.#errorTypes = createSignal(errorTypes)
+    this.#hideDisabledQueries = createSignal(hideDisabledQueries)
   }
 
   setButtonPosition(position: DevtoolsButtonPosition) {
@@ -88,6 +91,7 @@ class TanstackQueryDevtools {
       const [pos] = this.#position
       const [isOpen] = this.#initialIsOpen
       const [errors] = this.#errorTypes
+      const [hideDisabledQueries] = this.#hideDisabledQueries
       const [queryClient] = this.#client
       let Devtools: DevtoolsComponentType
 
@@ -121,6 +125,9 @@ class TanstackQueryDevtools {
             get errorTypes() {
               return errors()
             },
+            get hideDisabledQueries() {
+              return hideDisabledQueries()
+            },
           }}
         />
       )

package/src/TanstackQueryDevtoolsPanel.tsx

@@ -32,6 +32,7 @@ class TanstackQueryDevtoolsPanel {
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
   #errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
+  #hideDisabledQueries: Signal<boolean | undefined>
   #onClose: Signal<(() => unknown) | undefined>
   #Component: DevtoolsComponentType | undefined
   #dispose?: () => void
@@ -49,6 +50,7 @@ class TanstackQueryDevtoolsPanel {
       styleNonce,
       shadowDOMTarget,
       onClose,
+      hideDisabledQueries,
     } = config
     this.#client = createSignal(client)
     this.#queryFlavor = queryFlavor
@@ -60,6 +62,7 @@ class TanstackQueryDevtoolsPanel {
     this.#position = createSignal(position)
     this.#initialIsOpen = createSignal(initialIsOpen)
     this.#errorTypes = createSignal(errorTypes)
+    this.#hideDisabledQueries = createSignal(hideDisabledQueries)
     this.#onClose = createSignal(onClose)
   }
 
@@ -96,6 +99,7 @@ class TanstackQueryDevtoolsPanel {
       const [pos] = this.#position
       const [isOpen] = this.#initialIsOpen
       const [errors] = this.#errorTypes
+      const [hideDisabledQueries] = this.#hideDisabledQueries
       const [queryClient] = this.#client
       const [onClose] = this.#onClose
       let Devtools: DevtoolsComponentType
@@ -130,6 +134,9 @@ class TanstackQueryDevtoolsPanel {
             get errorTypes() {
               return errors()
             },
+            get hideDisabledQueries() {
+              return hideDisabledQueries()
+            },
             get onClose() {
               return onClose()
             },

package/src/contexts/QueryDevtoolsContext.ts

@@ -29,6 +29,7 @@ export interface QueryDevtoolsProps {
   errorTypes?: Array<DevtoolsErrorType>
   shadowDOMTarget?: ShadowRoot
   onClose?: () => unknown
+  hideDisabledQueries?: boolean
 }
 
 export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({