@buoy-gg/react-query 1.7.7 → 2.1.1

package/lib/commonjs/preset.js

@@ -35,7 +35,7 @@ const EmptyComponent = () => null;
 // Save WiFi state to storage
 const saveWifiState = async enabled => {
   try {
-    await (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
+    await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
   } catch (error) {
     // Failed to save WiFi state
   }

package/lib/commonjs/react-query/components/ReactQueryDevToolsModal.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReactQueryDevToolsModal = ReactQueryDevToolsModal;
 var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
 var _ReactQueryModal = require("./modals/ReactQueryModal");
+var _reactQueryEventStore = require("../stores/reactQueryEventStore");
 var _jsxRuntime = require("react/jsx-runtime");
 /** Configuration options for the high-level React Query dev tools modal wrapper. */
 
@@ -19,6 +21,16 @@ function ReactQueryDevToolsModal({
   onMinimize,
   enableSharedModalDimensions = true
 }) {
+  // Get QueryClient and connect to event store for unified Events DevTools
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  (0, _react.useEffect)(() => {
+    // Connect the QueryClient to the event store so events flow to unified Events DevTools
+    // Only connect if not already connected (to preserve connection across modal open/close)
+    if (!_reactQueryEventStore.reactQueryEventStore.isConnected()) {
+      _reactQueryEventStore.reactQueryEventStore.setQueryClient(queryClient);
+    }
+    // Don't disconnect on unmount - keep the connection for unified Events DevTools
+  }, [queryClient]);
   const [selectedQueryKey, setSelectedQueryKey] = (0, _react.useState)(undefined);
   const [selectedMutationId, setSelectedMutationId] = (0, _react.useState)(undefined);
   const [activeFilter, setActiveFilter] = (0, _react.useState)(null);

package/lib/commonjs/react-query/components/modals/MutationBrowserModal.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MutationBrowserModal = MutationBrowserModal;
+var _reactQuery = require("@tanstack/react-query");
 var _react = require("react");
 var _useSelectedMutation = require("../../hooks/useSelectedMutation");
 var _MutationBrowserMode = require("../MutationBrowserMode");
@@ -30,11 +31,18 @@ function MutationBrowserModal({
   searchText = "",
   onSearchChange
 }) {
+  const queryClient = (0, _reactQuery.useQueryClient)();
   const selectedMutation = (0, _useSelectedMutation.useGetMutationById)(selectedMutationId);
   const [internalActiveFilter, setInternalActiveFilter] = (0, _react.useState)(null);
   const activeFilter = externalActiveFilter ?? internalActiveFilter;
   const setActiveFilter = externalOnFilterChange ?? setInternalActiveFilter;
 
+  // Clear mutation cache handler
+  const handleClearCache = (0, _react.useCallback)(() => {
+    queryClient.getMutationCache().clear();
+    onMutationSelect(undefined);
+  }, [queryClient, onMutationSelect]);
+
   // Track modal mode for conditional styling
   // Initialize with bottomSheet but it will be updated from persisted state if available
   const [modalMode, setModalMode] = (0, _react.useState)("bottomSheet");
@@ -98,7 +106,8 @@ function MutationBrowserModal({
     onTabChange: onTabChange,
     onBack: () => onMutationSelect(undefined),
     searchText: searchText,
-    onSearchChange: onSearchChange
+    onSearchChange: onSearchChange,
+    onClearCache: handleClearCache
   });
   const footerNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationBrowserFooter.MutationBrowserFooter, {
     activeFilter: activeFilter,

package/lib/commonjs/react-query/components/modals/QueryBrowserModal.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.QueryBrowserModal = QueryBrowserModal;
+var _reactQuery = require("@tanstack/react-query");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _useSelectedQuery = require("../../hooks/useSelectedQuery");
 var _ReactQueryModalHeader = require("./ReactQueryModalHeader");
@@ -32,9 +33,15 @@ function QueryBrowserModal({
   searchText = "",
   onSearchChange
 }) {
+  const queryClient = (0, _reactQuery.useQueryClient)();
   const selectedQuery = (0, _useSelectedQuery.useGetQueryByQueryKey)(selectedQueryKey);
   const allQueries = (0, _useAllQueries.default)();
 
+  // Clear query cache handler
+  const handleClearCache = (0, _react.useCallback)(() => {
+    queryClient.getQueryCache().clear();
+  }, [queryClient]);
+
   // Use external filter state if provided (for persistence), otherwise use internal state
   const [internalActiveFilter, setInternalActiveFilter] = (0, _react.useState)(null);
   const activeFilter = externalActiveFilter ?? internalActiveFilter;
@@ -45,17 +52,11 @@ function QueryBrowserModal({
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
   const [includedPatterns, setIncludedPatterns] = (0, _react.useState)(new Set());
 
-  // AsyncStorage for persisting ignored patterns
-  const {
-    getItem: safeGetItem,
-    setItem: safeSetItem
-  } = (0, _sharedUi.useSafeAsyncStorage)();
-
   // Load ignored patterns from storage on mount
   (0, _react.useEffect)(() => {
     const loadFilters = async () => {
       try {
-        const stored = await safeGetItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns());
+        const stored = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns());
         if (stored) {
           const patterns = JSON.parse(stored);
           if (Array.isArray(patterns)) {
@@ -67,13 +68,13 @@ function QueryBrowserModal({
       }
     };
     loadFilters();
-  }, [safeGetItem]);
+  }, []);
 
   // Load included patterns from storage on mount
   (0, _react.useEffect)(() => {
     const loadFilters = async () => {
       try {
-        const stored = await safeGetItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns());
+        const stored = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns());
         if (stored) {
           const patterns = JSON.parse(stored);
           if (Array.isArray(patterns)) {
@@ -85,33 +86,33 @@ function QueryBrowserModal({
       }
     };
     loadFilters();
-  }, [safeGetItem]);
+  }, []);
 
   // Save ignored patterns to storage when they change
   (0, _react.useEffect)(() => {
     const saveFilters = async () => {
       try {
         const patterns = Array.from(ignoredPatterns);
-        await safeSetItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns(), JSON.stringify(patterns));
+        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns(), JSON.stringify(patterns));
       } catch (error) {
         console.error("Failed to save ignored patterns:", error);
       }
     };
     saveFilters();
-  }, [ignoredPatterns, safeSetItem]);
+  }, [ignoredPatterns]);
 
   // Save included patterns to storage when they change
   (0, _react.useEffect)(() => {
     const saveFilters = async () => {
       try {
         const patterns = Array.from(includedPatterns);
-        await safeSetItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns(), JSON.stringify(patterns));
+        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns(), JSON.stringify(patterns));
       } catch (error) {
         console.error("Failed to save included patterns:", error);
       }
     };
     saveFilters();
-  }, [includedPatterns, safeSetItem]);
+  }, [includedPatterns]);
 
   // Toggle pattern in ignored set
   const handlePatternToggle = (0, _react.useCallback)(pattern => {
@@ -177,7 +178,8 @@ function QueryBrowserModal({
       searchText: searchText,
       onSearchChange: onSearchChange,
       onFilterPress: () => setShowFilterView(true),
-      hasActiveFilters: activeFilter !== null || ignoredPatterns.size > 0 || includedPatterns.size > 0
+      hasActiveFilters: activeFilter !== null || ignoredPatterns.size > 0 || includedPatterns.size > 0,
+      onClearCache: handleClearCache
     });
   };
   const footerNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryBrowserFooter.QueryBrowserFooter, {

package/lib/commonjs/react-query/components/modals/ReactQueryModalHeader.js

@@ -21,7 +21,8 @@ function ReactQueryModalHeader({
   searchText = "",
   onSearchChange,
   onFilterPress,
-  hasActiveFilters = false
+  hasActiveFilters = false,
+  onClearCache
 }) {
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
   const searchInputRef = (0, _react.useRef)(null);
@@ -133,6 +134,15 @@ function ReactQueryModalHeader({
           size: 14,
           color: hasActiveFilters ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
         })
+      }), onClearCache && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        "sentry-label": "ignore clear cache",
+        onPress: onClearCache,
+        style: [styles.headerActionButton, styles.clearCacheButton],
+        accessibilityLabel: `Clear ${activeTab} cache`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash, {
+          size: 14,
+          color: _sharedUi.buoyColors.warning
+        })
       })]
     })]
   });
@@ -167,5 +177,8 @@ const styles = _reactNative.StyleSheet.create({
   },
   activeFilterButton: {
     backgroundColor: _sharedUi.buoyColors.primary + "33"
+  },
+  clearCacheButton: {
+    backgroundColor: _sharedUi.buoyColors.warning + "20"
   }
 });

package/lib/commonjs/react-query/hooks/useAllMutations.js

@@ -7,27 +7,77 @@ exports.default = void 0;
 var _react = require("react");
 var _reactQuery = require("@tanstack/react-query");
 /**
- * Tracks all active React Query mutations with lightweight change detection. Debounces cache
- * updates so large mutation batches do not thrash the UI thread on mobile.
+ * Tracks all active React Query mutations with lightweight change detection.
+ * Mirrors the pattern used in useAllQueries for consistency.
  */
 function useAllMutations() {
   const queryClient = (0, _reactQuery.useQueryClient)();
-  const [mutations, setMutations] = (0, _react.useState)([]);
-  const mutationsSnapshotRef = (0, _react.useRef)(null);
+  const [mutations, setMutations] = (0, _react.useState)(() => {
+    // Initialize with current mutations to avoid flash
+    return queryClient.getMutationCache().getAll();
+  });
+
+  // Track mutation states using a Map for O(1) lookups
+  const mutationStatesRef = (0, _react.useRef)(new Map());
+  const updateTimerRef = (0, _react.useRef)(undefined);
+
+  // Check if mutations have changed
+  const hasMutationsChanged = (0, _react.useCallback)(newMutations => {
+    const statesMap = mutationStatesRef.current;
+
+    // Quick length check first
+    if (newMutations.length !== statesMap.size) {
+      return true;
+    }
+
+    // Check if any mutation state has changed
+    for (const mutation of newMutations) {
+      const prevState = statesMap.get(mutation.mutationId);
+      if (!prevState) return true;
+      if (prevState.status !== mutation.state.status || prevState.submittedAt !== mutation.state.submittedAt || prevState.isPaused !== mutation.state.isPaused) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+
+  // Update function
+  const updateMutations = (0, _react.useCallback)(() => {
+    const allMutations = queryClient.getMutationCache().getAll();
+    if (hasMutationsChanged(allMutations)) {
+      // Update states map
+      const newStatesMap = new Map();
+      allMutations.forEach(m => {
+        newStatesMap.set(m.mutationId, m.state);
+      });
+      mutationStatesRef.current = newStatesMap;
+      setMutations(allMutations);
+    }
+  }, [queryClient, hasMutationsChanged]);
   (0, _react.useEffect)(() => {
-    const updateMutations = () => {
-      const newMutations = queryClient.getMutationCache().getAll();
-      const newStates = newMutations.map(m => m.state);
-      const snapshot = JSON.stringify(newStates);
-      if (mutationsSnapshotRef.current !== snapshot) {
-        mutationsSnapshotRef.current = snapshot;
-        setTimeout(() => setMutations(newMutations), 0);
+    // Initial update
+    updateMutations();
+
+    // Subscribe with event filtering (matching useAllQueries pattern)
+    const unsubscribe = queryClient.getMutationCache().subscribe(event => {
+      // Process events that affect mutation list
+      if (event.type === "added" || event.type === "removed" || event.type === "updated") {
+        // Debounce updates to batch rapid changes
+        if (updateTimerRef.current) {
+          clearTimeout(updateTimerRef.current);
+        }
+        updateTimerRef.current = setTimeout(() => {
+          updateMutations();
+        }, 10);
+      }
+    });
+    return () => {
+      unsubscribe();
+      if (updateTimerRef.current) {
+        clearTimeout(updateTimerRef.current);
       }
     };
-    setTimeout(updateMutations, 0);
-    const unsubscribe = queryClient.getMutationCache().subscribe(updateMutations);
-    return () => unsubscribe();
-  }, [queryClient]);
+  }, [queryClient, updateMutations]);
   return {
     mutations
   };

package/lib/commonjs/react-query/hooks/useWifiState.js

@@ -8,7 +8,7 @@ var _react = require("react");
 var _reactQuery = require("@tanstack/react-query");
 var _sharedUi = require("@buoy-gg/shared-ui");
 /**
- * Synchronizes a local Wi-Fi toggle with React Query’s `onlineManager`, persisting the selection
+ * Synchronizes a local Wi-Fi toggle with React Query's `onlineManager`, persisting the selection
  * so developers can simulate offline mode across reloads.
  */
 function useWifiState() {
@@ -20,7 +20,7 @@ function useWifiState() {
     if (hasLoadedPersistedState.current) return;
     const loadPersistedState = async () => {
       try {
-        const savedState = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.settings.wifiEnabled());
+        const savedState = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.wifiEnabled());
         if (savedState !== null) {
           const isEnabled = savedState === "true";
           setIsOnline(isEnabled);
@@ -37,7 +37,7 @@ function useWifiState() {
   // Save WiFi state when it changes
   const saveWifiState = async enabled => {
     try {
-      await (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
+      await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
     } catch (error) {
       // Failed to save WiFi state
     }

package/lib/commonjs/react-query/index.js

@@ -13,4 +13,15 @@ Object.keys(_ReactQueryDevTools).forEach(function (key) {
       return _ReactQueryDevTools[key];
     }
   });
+});
+var _stores = require("./stores");
+Object.keys(_stores).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _stores[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _stores[key];
+    }
+  });
 });

package/lib/commonjs/react-query/stores/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "clearReactQueryEvents", {
+  enumerable: true,
+  get: function () {
+    return _reactQueryEventStore.clearReactQueryEvents;
+  }
+});
+Object.defineProperty(exports, "disconnectQueryClient", {
+  enumerable: true,
+  get: function () {
+    return _reactQueryEventStore.disconnectQueryClient;
+  }
+});
+Object.defineProperty(exports, "getReactQueryEvents", {
+  enumerable: true,
+  get: function () {
+    return _reactQueryEventStore.getReactQueryEvents;
+  }
+});
+Object.defineProperty(exports, "isReactQueryConnected", {
+  enumerable: true,
+  get: function () {
+    return _reactQueryEventStore.isReactQueryConnected;
+  }
+});
+Object.defineProperty(exports, "reactQueryEventStore", {
+  enumerable: true,
+  get: function () {
+    return _reactQueryEventStore.reactQueryEventStore;
+  }
+});
+Object.defineProperty(exports, "setQueryClient", {
+  enumerable: true,
+  get: function () {
+    return _reactQueryEventStore.setQueryClient;
+  }
+});
+Object.defineProperty(exports, "subscribeToReactQueryEvents", {
+  enumerable: true,
+  get: function () {
+    return _reactQueryEventStore.subscribeToReactQueryEvents;
+  }
+});
+var _reactQueryEventStore = require("./reactQueryEventStore");