@tanstack/query-devtools 5.12.1 → 5.13.3

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

@@ -11152,22 +11152,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 +11919,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 +11934,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 +11946,10 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  queryCacheMap.set(callback, setValue);
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate
+  });
   onCleanup(() => {
     queryCacheMap.delete(callback);
   });

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

@@ -11151,22 +11151,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 +11918,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 +11933,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 +11945,10 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  queryCacheMap.set(callback, setValue);
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate
+  });
   onCleanup(() => {
     queryCacheMap.delete(callback);
   });

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

@@ -10308,16 +10308,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 +11107,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 +11122,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 +11133,10 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  queryCacheMap.set(callback, setValue);
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate
+  });
   onCleanup(() => {
     queryCacheMap.delete(callback);
   });

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

@@ -10307,16 +10307,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 +11106,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 +11121,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 +11132,10 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  queryCacheMap.set(callback, setValue);
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate
+  });
   onCleanup(() => {
     queryCacheMap.delete(callback);
   });

package/build/dev.cjs

@@ -13831,16 +13831,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 +14630,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 +14645,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 +14656,10 @@ var init_Devtools = __esm({
       createEffect(() => {
         setValue(callback(queryCache));
       });
-      queryCacheMap.set(callback, setValue);
+      queryCacheMap.set(callback, {
+        setter: setValue,
+        shouldUpdate
+      });
       onCleanup(() => {
         queryCacheMap.delete(callback);
       });

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/VWYHBKXD.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/EN5OW4QY.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -13829,16 +13829,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 +14628,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 +14643,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 +14654,10 @@ var init_Devtools = __esm({
       createEffect(() => {
         setValue(callback(queryCache));
       });
-      queryCacheMap.set(callback, setValue);
+      queryCacheMap.set(callback, {
+        setter: setValue,
+        shouldUpdate
+      });
       onCleanup(() => {
         queryCacheMap.delete(callback);
       });

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/XEIAQO4C.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/HI6IFUTD.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.3",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",

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'
@@ -1053,6 +1055,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 +1066,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 +1077,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 +1088,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 +2045,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 +2059,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 +2079,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 +2095,10 @@ const createSubscribeToQueryCacheBatcher = <T,>(
     setValue(callback(queryCache))
   })
 
-  // @ts-ignore
-  queryCacheMap.set(callback, setValue)
+  queryCacheMap.set(callback, {
+    setter: setValue,
+    shouldUpdate: shouldUpdate,
+  })
 
   onCleanup(() => {
     // @ts-ignore