@tanstack/query-devtools 5.12.1 → 5.13.5

package/build/Devtools/{ANE6OXOK.js → JDX7DFYK.js}

@@ -10236,6 +10236,9 @@ var ContentView = (props) => {
       const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
       _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
       _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -10308,16 +10311,16 @@ var QueryRow = (props) => {
   const t2 = (light, dark) => theme() === "dark" ? dark : light;
   const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
-  })?.state);
+  })?.state, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const isDisabled = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
-  })?.isDisabled() ?? false);
+  })?.isDisabled() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const isStale = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
-  })?.isStale() ?? false);
+  })?.isStale() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const observers = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
-  })?.getObserversCount() ?? 0);
+  })?.getObserversCount() ?? 0, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const color = createMemo(() => getQueryStatusColor({
     queryState: queryState(),
     observerCount: observers(),
@@ -11107,12 +11110,14 @@ var setupQueryCacheSubscription = () => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
   });
-  const unsub = queryCache().subscribe(() => {
-    for (const [callback, setter] of queryCacheMap.entries()) {
-      queueMicrotask(() => {
-        setter(callback(queryCache));
-      });
-    }
+  const unsub = queryCache().subscribe((q) => {
+    batch(() => {
+      for (const [callback, value] of queryCacheMap.entries()) {
+        if (!value.shouldUpdate(q))
+          continue;
+        value.setter(callback(queryCache));
+      }
+    });
   });
   onCleanup(() => {
     queryCacheMap.clear();
@@ -11120,7 +11125,7 @@ var setupQueryCacheSubscription = () => {
   });
   return unsub;
 };
-var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
+var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true, shouldUpdate = () => true) => {
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
@@ -11131,7 +11136,10 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  queryCacheMap.set(callback, setValue);
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate
+  });
   onCleanup(() => {
     queryCacheMap.delete(callback);
   });
@@ -11247,6 +11255,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{Y6OLANNQ.jsx → KEJBG6PF.jsx}

@@ -10793,6 +10793,10 @@ var ContentView = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+        panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
+            `,
         "tsqd-queries-container"
       )}
       ref={containerRef}
@@ -11151,22 +11155,30 @@ var QueryRow = (props) => {
   const queryState = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
-    })?.state
+    })?.state,
+    true,
+    (e2) => e2.query.queryHash === props.query.queryHash
   );
   const isDisabled = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
-    })?.isDisabled() ?? false
+    })?.isDisabled() ?? false,
+    true,
+    (e2) => e2.query.queryHash === props.query.queryHash
   );
   const isStale = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
-    })?.isStale() ?? false
+    })?.isStale() ?? false,
+    true,
+    (e2) => e2.query.queryHash === props.query.queryHash
   );
   const observers = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
-    })?.getObserversCount() ?? 0
+    })?.getObserversCount() ?? 0,
+    true,
+    (e2) => e2.query.queryHash === props.query.queryHash
   );
   const color = createMemo(
     () => getQueryStatusColor({
@@ -11910,12 +11922,14 @@ var setupQueryCacheSubscription = () => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
   });
-  const unsub = queryCache().subscribe(() => {
-    for (const [callback, setter] of queryCacheMap.entries()) {
-      queueMicrotask(() => {
-        setter(callback(queryCache));
-      });
-    }
+  const unsub = queryCache().subscribe((q) => {
+    batch(() => {
+      for (const [callback, value] of queryCacheMap.entries()) {
+        if (!value.shouldUpdate(q))
+          continue;
+        value.setter(callback(queryCache));
+      }
+    });
   });
   onCleanup(() => {
     queryCacheMap.clear();
@@ -11923,7 +11937,7 @@ var setupQueryCacheSubscription = () => {
   });
   return unsub;
 };
-var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
+var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true, shouldUpdate = () => true) => {
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
@@ -11935,7 +11949,10 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  queryCacheMap.set(callback, setValue);
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate
+  });
   onCleanup(() => {
     queryCacheMap.delete(callback);
   });
@@ -12045,6 +12062,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{E3UEEC63.js → N66J3ZXT.js}

@@ -10235,6 +10235,9 @@ var ContentView = (props) => {
       const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
       _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
       _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -10307,16 +10310,16 @@ var QueryRow = (props) => {
   const t2 = (light, dark) => theme() === "dark" ? dark : light;
   const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
-  })?.state);
+  })?.state, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const isDisabled = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
-  })?.isDisabled() ?? false);
+  })?.isDisabled() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const isStale = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
-  })?.isStale() ?? false);
+  })?.isStale() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const observers = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
-  })?.getObserversCount() ?? 0);
+  })?.getObserversCount() ?? 0, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const color = createMemo(() => getQueryStatusColor({
     queryState: queryState(),
     observerCount: observers(),
@@ -11106,12 +11109,14 @@ var setupQueryCacheSubscription = () => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
   });
-  const unsub = queryCache().subscribe(() => {
-    for (const [callback, setter] of queryCacheMap.entries()) {
-      queueMicrotask(() => {
-        setter(callback(queryCache));
-      });
-    }
+  const unsub = queryCache().subscribe((q) => {
+    batch(() => {
+      for (const [callback, value] of queryCacheMap.entries()) {
+        if (!value.shouldUpdate(q))
+          continue;
+        value.setter(callback(queryCache));
+      }
+    });
   });
   onCleanup(() => {
     queryCacheMap.clear();
@@ -11119,7 +11124,7 @@ var setupQueryCacheSubscription = () => {
   });
   return unsub;
 };
-var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
+var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true, shouldUpdate = () => true) => {
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
@@ -11130,7 +11135,10 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  queryCacheMap.set(callback, setValue);
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate
+  });
   onCleanup(() => {
     queryCacheMap.delete(callback);
   });
@@ -11246,6 +11254,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{OG2NFD3H.jsx → YGZHNM6M.jsx}

@@ -10794,6 +10794,10 @@ var ContentView = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+        panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
+            `,
         "tsqd-queries-container"
       )}
       ref={containerRef}
@@ -11152,22 +11156,30 @@ var QueryRow = (props) => {
   const queryState = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
-    })?.state
+    })?.state,
+    true,
+    (e2) => e2.query.queryHash === props.query.queryHash
   );
   const isDisabled = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
-    })?.isDisabled() ?? false
+    })?.isDisabled() ?? false,
+    true,
+    (e2) => e2.query.queryHash === props.query.queryHash
   );
   const isStale = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
-    })?.isStale() ?? false
+    })?.isStale() ?? false,
+    true,
+    (e2) => e2.query.queryHash === props.query.queryHash
   );
   const observers = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
-    })?.getObserversCount() ?? 0
+    })?.getObserversCount() ?? 0,
+    true,
+    (e2) => e2.query.queryHash === props.query.queryHash
   );
   const color = createMemo(
     () => getQueryStatusColor({
@@ -11911,12 +11923,14 @@ var setupQueryCacheSubscription = () => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
   });
-  const unsub = queryCache().subscribe(() => {
-    for (const [callback, setter] of queryCacheMap.entries()) {
-      queueMicrotask(() => {
-        setter(callback(queryCache));
-      });
-    }
+  const unsub = queryCache().subscribe((q) => {
+    batch(() => {
+      for (const [callback, value] of queryCacheMap.entries()) {
+        if (!value.shouldUpdate(q))
+          continue;
+        value.setter(callback(queryCache));
+      }
+    });
   });
   onCleanup(() => {
     queryCacheMap.clear();
@@ -11924,7 +11938,7 @@ var setupQueryCacheSubscription = () => {
   });
   return unsub;
 };
-var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
+var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true, shouldUpdate = () => true) => {
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
@@ -11936,7 +11950,10 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  queryCacheMap.set(callback, setValue);
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate
+  });
   onCleanup(() => {
     queryCacheMap.delete(callback);
   });
@@ -12046,6 +12063,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/dev.cjs

@@ -13759,6 +13759,9 @@ var init_Devtools = __esm({
           const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
           _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
           _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -13831,16 +13834,16 @@ var init_Devtools = __esm({
       const t2 = (light, dark) => theme() === "dark" ? dark : light;
       const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
-      })?.state);
+      })?.state, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const isDisabled = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
-      })?.isDisabled() ?? false);
+      })?.isDisabled() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const isStale = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
-      })?.isStale() ?? false);
+      })?.isStale() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const observers = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
-      })?.getObserversCount() ?? 0);
+      })?.getObserversCount() ?? 0, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const color = createMemo(() => getQueryStatusColor({
         queryState: queryState(),
         observerCount: observers(),
@@ -14630,12 +14633,14 @@ var init_Devtools = __esm({
         const client = useQueryDevtoolsContext().client;
         return client.getQueryCache();
       });
-      const unsub = queryCache().subscribe(() => {
-        for (const [callback, setter] of queryCacheMap.entries()) {
-          queueMicrotask(() => {
-            setter(callback(queryCache));
-          });
-        }
+      const unsub = queryCache().subscribe((q) => {
+        batch(() => {
+          for (const [callback, value] of queryCacheMap.entries()) {
+            if (!value.shouldUpdate(q))
+              continue;
+            value.setter(callback(queryCache));
+          }
+        });
       });
       onCleanup(() => {
         queryCacheMap.clear();
@@ -14643,7 +14648,7 @@ var init_Devtools = __esm({
       });
       return unsub;
     };
-    createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
+    createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true, shouldUpdate = () => true) => {
       const queryCache = createMemo(() => {
         const client = useQueryDevtoolsContext().client;
         return client.getQueryCache();
@@ -14654,7 +14659,10 @@ var init_Devtools = __esm({
       createEffect(() => {
         setValue(callback(queryCache));
       });
-      queryCacheMap.set(callback, setValue);
+      queryCacheMap.set(callback, {
+        setter: setValue,
+        shouldUpdate
+      });
       onCleanup(() => {
         queryCacheMap.delete(callback);
       });
@@ -14770,6 +14778,22 @@ var init_Devtools = __esm({
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
         "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/dev.js

@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/ANE6OXOK.js'));
+        Devtools = lazy(() => import('./Devtools/JDX7DFYK.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/dev.jsx

@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/OG2NFD3H.jsx"));
+        Devtools = lazy(() => import("./Devtools/YGZHNM6M.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -13757,6 +13757,9 @@ var init_Devtools = __esm({
           const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
           _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
           _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -13829,16 +13832,16 @@ var init_Devtools = __esm({
       const t2 = (light, dark) => theme() === "dark" ? dark : light;
       const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
-      })?.state);
+      })?.state, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const isDisabled = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
-      })?.isDisabled() ?? false);
+      })?.isDisabled() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const isStale = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
-      })?.isStale() ?? false);
+      })?.isStale() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const observers = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
-      })?.getObserversCount() ?? 0);
+      })?.getObserversCount() ?? 0, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const color = createMemo(() => getQueryStatusColor({
         queryState: queryState(),
         observerCount: observers(),
@@ -14628,12 +14631,14 @@ var init_Devtools = __esm({
         const client = useQueryDevtoolsContext().client;
         return client.getQueryCache();
       });
-      const unsub = queryCache().subscribe(() => {
-        for (const [callback, setter] of queryCacheMap.entries()) {
-          queueMicrotask(() => {
-            setter(callback(queryCache));
-          });
-        }
+      const unsub = queryCache().subscribe((q) => {
+        batch(() => {
+          for (const [callback, value] of queryCacheMap.entries()) {
+            if (!value.shouldUpdate(q))
+              continue;
+            value.setter(callback(queryCache));
+          }
+        });
       });
       onCleanup(() => {
         queryCacheMap.clear();
@@ -14641,7 +14646,7 @@ var init_Devtools = __esm({
       });
       return unsub;
     };
-    createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
+    createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true, shouldUpdate = () => true) => {
       const queryCache = createMemo(() => {
         const client = useQueryDevtoolsContext().client;
         return client.getQueryCache();
@@ -14652,7 +14657,10 @@ var init_Devtools = __esm({
       createEffect(() => {
         setValue(callback(queryCache));
       });
-      queryCacheMap.set(callback, setValue);
+      queryCacheMap.set(callback, {
+        setter: setValue,
+        shouldUpdate
+      });
       onCleanup(() => {
         queryCacheMap.delete(callback);
       });
@@ -14768,6 +14776,22 @@ var init_Devtools = __esm({
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
         "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/index.js

@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/E3UEEC63.js'));
+        Devtools = lazy(() => import('./Devtools/N66J3ZXT.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.jsx

@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/Y6OLANNQ.jsx"));
+        Devtools = lazy(() => import("./Devtools/KEJBG6PF.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.12.1",
+  "version": "5.13.5",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "superjson": "^1.12.4",
     "tsup-preset-solid": "^2.1.0",
     "vite-plugin-solid": "^2.7.2",
-    "@tanstack/query-core": "5.12.1"
+    "@tanstack/query-core": "5.13.4"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -1,6 +1,7 @@
 import {
   For,
   Show,
+  batch,
   createEffect,
   createMemo,
   createSignal,
@@ -68,6 +69,7 @@ import type {
   MutationCache,
   Query,
   QueryCache,
+  QueryCacheNotifyEvent,
   QueryState,
 } from '@tanstack/query-core'
 import type { StorageObject, StorageSetter } from '@solid-primitives/storage'
@@ -599,6 +601,12 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+          panelWidth() < secondBreakpoint &&
+            !(selectedQueryHash() || selectedMutationId()) &&
+            css`
+              height: 100%;
+              max-height: 100%;
+            `,
           'tsqd-queries-container',
         )}
         ref={containerRef}
@@ -1053,6 +1061,8 @@ const QueryRow: Component<{ query: Query }> = (props) => {
       queryCache().find({
         queryKey: props.query.queryKey,
       })?.state,
+    true,
+    (e) => e.query.queryHash === props.query.queryHash,
   )
 
   const isDisabled = createSubscribeToQueryCacheBatcher(
@@ -1062,6 +1072,8 @@ const QueryRow: Component<{ query: Query }> = (props) => {
           queryKey: props.query.queryKey,
         })
         ?.isDisabled() ?? false,
+    true,
+    (e) => e.query.queryHash === props.query.queryHash,
   )
 
   const isStale = createSubscribeToQueryCacheBatcher(
@@ -1071,6 +1083,8 @@ const QueryRow: Component<{ query: Query }> = (props) => {
           queryKey: props.query.queryKey,
         })
         ?.isStale() ?? false,
+    true,
+    (e) => e.query.queryHash === props.query.queryHash,
   )
 
   const observers = createSubscribeToQueryCacheBatcher(
@@ -1080,6 +1094,8 @@ const QueryRow: Component<{ query: Query }> = (props) => {
           queryKey: props.query.queryKey,
         })
         ?.getObserversCount() ?? 0,
+    true,
+    (e) => e.query.queryHash === props.query.queryHash,
   )
 
   const color = createMemo(() =>
@@ -2035,7 +2051,13 @@ const MutationDetails = () => {
   )
 }
 
-const queryCacheMap = new Map<(q: Accessor<QueryCache>) => any, Setter<any>>()
+const queryCacheMap = new Map<
+  (q: Accessor<QueryCache>) => any,
+  {
+    setter: Setter<any>
+    shouldUpdate: (event: QueryCacheNotifyEvent) => boolean
+  }
+>()
 
 const setupQueryCacheSubscription = () => {
   const queryCache = createMemo(() => {
@@ -2043,12 +2065,13 @@ const setupQueryCacheSubscription = () => {
     return client.getQueryCache()
   })
 
-  const unsub = queryCache().subscribe(() => {
-    for (const [callback, setter] of queryCacheMap.entries()) {
-      queueMicrotask(() => {
-        setter(callback(queryCache))
-      })
-    }
+  const unsub = queryCache().subscribe((q) => {
+    batch(() => {
+      for (const [callback, value] of queryCacheMap.entries()) {
+        if (!value.shouldUpdate(q)) continue
+        value.setter(callback(queryCache))
+      }
+    })
   })
 
   onCleanup(() => {
@@ -2062,6 +2085,7 @@ const setupQueryCacheSubscription = () => {
 const createSubscribeToQueryCacheBatcher = <T,>(
   callback: (queryCache: Accessor<QueryCache>) => Exclude<T, Function>,
   equalityCheck: boolean = true,
+  shouldUpdate: (event: QueryCacheNotifyEvent) => boolean = () => true,
 ) => {
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client
@@ -2077,8 +2101,10 @@ const createSubscribeToQueryCacheBatcher = <T,>(
     setValue(callback(queryCache))
   })
 
-  // @ts-ignore
-  queryCacheMap.set(callback, setValue)
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate: shouldUpdate,
+  })
 
   onCleanup(() => {
     // @ts-ignore
@@ -2213,6 +2239,22 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     'devtoolsBtn-position-bottom-right': css`
       bottom: 12px;