@buoy-gg/react-query 1.7.7 → 2.1.1

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

@@ -0,0 +1,311 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subscribeToReactQueryEvents = exports.setQueryClient = exports.reactQueryEventStore = exports.isReactQueryConnected = exports.getReactQueryEvents = exports.disconnectQueryClient = exports.clearReactQueryEvents = void 0;
+var _storageQueryUtils = require("../utils/storageQueryUtils");
+/**
+ * React Query Event Store
+ *
+ * Bridges React Query's cache subscription system to a simple pub/sub pattern
+ * that can be consumed by the unified Events DevTools.
+ *
+ * Usage:
+ * 1. In your app, call setQueryClient(queryClient) to connect
+ * 2. The store will emit events for query/mutation state changes
+ * 3. The Events DevTools subscribes to these events
+ */
+
+/**
+ * React Query event types for the unified timeline
+ */
+
+/**
+ * Unified React Query event for the timeline
+ */
+
+let eventIdCounter = 0;
+function generateEventId() {
+  return `rq-${Date.now()}-${++eventIdCounter}`;
+}
+class ReactQueryEventStore {
+  events = [];
+  listeners = new Set();
+  queryClient = null;
+  queryUnsubscribe = null;
+  mutationUnsubscribe = null;
+  maxEvents = 200;
+
+  // Track fetch start times for duration calculation
+  fetchStartTimes = new Map();
+  mutationStartTimes = new Map();
+
+  // Track last known states to detect transitions
+  lastQueryStates = new Map();
+  lastMutationStates = new Map();
+
+  /**
+   * Connect a QueryClient to the store
+   * Call this in your app after creating the QueryClient
+   */
+  setQueryClient(queryClient) {
+    // Cleanup previous connection
+    this.disconnect();
+    this.queryClient = queryClient;
+
+    // Subscribe to query cache
+    this.queryUnsubscribe = queryClient.getQueryCache().subscribe(event => {
+      if (event.type === "updated" && event.query) {
+        this.handleQueryUpdate(event.query);
+      }
+    });
+
+    // Subscribe to mutation cache
+    this.mutationUnsubscribe = queryClient.getMutationCache().subscribe(event => {
+      if (event.type === "updated" && event.mutation) {
+        this.handleMutationUpdate(event.mutation);
+      }
+    });
+  }
+
+  /**
+   * Disconnect from the QueryClient
+   */
+  disconnect() {
+    if (this.queryUnsubscribe) {
+      this.queryUnsubscribe();
+      this.queryUnsubscribe = null;
+    }
+    if (this.mutationUnsubscribe) {
+      this.mutationUnsubscribe();
+      this.mutationUnsubscribe = null;
+    }
+    this.queryClient = null;
+    this.lastQueryStates.clear();
+    this.lastMutationStates.clear();
+    this.fetchStartTimes.clear();
+    this.mutationStartTimes.clear();
+  }
+
+  /**
+   * Handle query state updates and emit appropriate events
+   */
+  handleQueryUpdate(query) {
+    // Skip storage queries (internal to the devtools)
+    if ((0, _storageQueryUtils.isStorageQuery)(query.queryKey)) {
+      return;
+    }
+    const queryHash = query.queryHash;
+    const currentState = {
+      fetchStatus: query.state.fetchStatus,
+      status: query.state.status
+    };
+    const lastState = this.lastQueryStates.get(queryHash);
+
+    // Detect state transitions
+    if (!lastState) {
+      // New query - if it's fetching, emit fetch start
+      if (currentState.fetchStatus === "fetching") {
+        this.fetchStartTimes.set(queryHash, Date.now());
+        this.addEvent({
+          id: generateEventId(),
+          type: "query-fetch-start",
+          timestamp: Date.now(),
+          queryKey: query.queryKey,
+          queryHash,
+          query
+        });
+      }
+    } else {
+      // Existing query - check for transitions
+      const wasFetching = lastState.fetchStatus === "fetching";
+      const isFetching = currentState.fetchStatus === "fetching";
+
+      // Started fetching
+      if (!wasFetching && isFetching) {
+        this.fetchStartTimes.set(queryHash, Date.now());
+        this.addEvent({
+          id: generateEventId(),
+          type: "query-fetch-start",
+          timestamp: Date.now(),
+          queryKey: query.queryKey,
+          queryHash,
+          query
+        });
+      }
+
+      // Finished fetching
+      if (wasFetching && !isFetching) {
+        const startTime = this.fetchStartTimes.get(queryHash);
+        const duration = startTime ? Date.now() - startTime : undefined;
+        this.fetchStartTimes.delete(queryHash);
+        if (currentState.status === "error") {
+          this.addEvent({
+            id: generateEventId(),
+            type: "query-fetch-error",
+            timestamp: Date.now(),
+            queryKey: query.queryKey,
+            queryHash,
+            queryError: query.state.error,
+            duration,
+            query
+          });
+        } else {
+          this.addEvent({
+            id: generateEventId(),
+            type: "query-fetch-success",
+            timestamp: Date.now(),
+            queryKey: query.queryKey,
+            queryHash,
+            queryData: query.state.data,
+            duration,
+            query
+          });
+        }
+      }
+
+      // Query was invalidated
+      if (!lastState.status && query.state.isInvalidated) {
+        this.addEvent({
+          id: generateEventId(),
+          type: "query-invalidated",
+          timestamp: Date.now(),
+          queryKey: query.queryKey,
+          queryHash,
+          query
+        });
+      }
+    }
+
+    // Update last known state
+    this.lastQueryStates.set(queryHash, currentState);
+  }
+
+  /**
+   * Handle mutation state updates and emit appropriate events
+   */
+  handleMutationUpdate(mutation) {
+    const mutationId = mutation.mutationId;
+    const currentStatus = mutation.state.status;
+    const lastStatus = this.lastMutationStates.get(mutationId);
+    if (lastStatus !== currentStatus) {
+      // Status changed
+      if (currentStatus === "pending" && lastStatus !== "pending") {
+        // Mutation started
+        this.mutationStartTimes.set(mutationId, Date.now());
+        this.addEvent({
+          id: generateEventId(),
+          type: "mutation-start",
+          timestamp: Date.now(),
+          mutationId,
+          mutationKey: mutation.options.mutationKey,
+          mutationVariables: mutation.state.variables,
+          mutation
+        });
+      } else if (currentStatus === "success" && lastStatus === "pending") {
+        // Mutation succeeded
+        const startTime = this.mutationStartTimes.get(mutationId);
+        const duration = startTime ? Date.now() - startTime : undefined;
+        this.mutationStartTimes.delete(mutationId);
+        this.addEvent({
+          id: generateEventId(),
+          type: "mutation-success",
+          timestamp: Date.now(),
+          mutationId,
+          mutationKey: mutation.options.mutationKey,
+          mutationVariables: mutation.state.variables,
+          mutationData: mutation.state.data,
+          duration,
+          mutation
+        });
+      } else if (currentStatus === "error" && lastStatus === "pending") {
+        // Mutation failed
+        const startTime = this.mutationStartTimes.get(mutationId);
+        const duration = startTime ? Date.now() - startTime : undefined;
+        this.mutationStartTimes.delete(mutationId);
+        this.addEvent({
+          id: generateEventId(),
+          type: "mutation-error",
+          timestamp: Date.now(),
+          mutationId,
+          mutationKey: mutation.options.mutationKey,
+          mutationVariables: mutation.state.variables,
+          mutationError: mutation.state.error,
+          duration,
+          mutation
+        });
+      }
+    }
+
+    // Update last known status
+    this.lastMutationStates.set(mutationId, currentStatus);
+  }
+
+  /**
+   * Add an event to the store
+   */
+  addEvent(event) {
+    this.events = [event, ...this.events].slice(0, this.maxEvents);
+    this.notifyListeners();
+  }
+
+  /**
+   * Get all events
+   */
+  getEvents() {
+    return this.events;
+  }
+
+  /**
+   * Subscribe to event changes
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    // Immediately call with current events
+    listener(this.events);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * Notify all listeners
+   */
+  notifyListeners() {
+    const events = this.events;
+    this.listeners.forEach(listener => listener(events));
+  }
+
+  /**
+   * Clear all events
+   */
+  clearEvents() {
+    this.events = [];
+    this.notifyListeners();
+  }
+
+  /**
+   * Check if connected to a QueryClient
+   */
+  isConnected() {
+    return this.queryClient !== null;
+  }
+}
+
+// Singleton instance
+const reactQueryEventStore = exports.reactQueryEventStore = new ReactQueryEventStore();
+
+// Convenience exports
+const setQueryClient = queryClient => reactQueryEventStore.setQueryClient(queryClient);
+exports.setQueryClient = setQueryClient;
+const disconnectQueryClient = () => reactQueryEventStore.disconnect();
+exports.disconnectQueryClient = disconnectQueryClient;
+const getReactQueryEvents = () => reactQueryEventStore.getEvents();
+exports.getReactQueryEvents = getReactQueryEvents;
+const subscribeToReactQueryEvents = listener => reactQueryEventStore.subscribe(listener);
+exports.subscribeToReactQueryEvents = subscribeToReactQueryEvents;
+const clearReactQueryEvents = () => reactQueryEventStore.clearEvents();
+exports.clearReactQueryEvents = clearReactQueryEvents;
+const isReactQueryConnected = () => reactQueryEventStore.isConnected();
+exports.isReactQueryConnected = isReactQueryConnected;

package/lib/commonjs/react-query/utils/modalStorageOperations.js

@@ -7,10 +7,10 @@ exports.savePanelHeight = exports.savePanelDimensions = exports.saveModalVisibil
 var _sharedUi = require("@buoy-gg/shared-ui");
 // Helper functions for persisting panel state using shared storage wrapper
 const setItem = async (key, value) => {
-  await (0, _sharedUi.safeSetItem)(key, value);
+  await _sharedUi.persistentStorage.setItem(key, value);
 };
 const getItem = async key => {
-  return (0, _sharedUi.safeGetItem)(key);
+  return _sharedUi.persistentStorage.getItem(key);
 };
 // Storage operations
 /**

package/lib/module/index.js

@@ -1,5 +1,15 @@
 "use strict";
 
+/**
+ * @buoy-gg/react-query
+ *
+ * React Query DevTools for React Native.
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ * Internal stores and event subscription mechanisms are not exported
+ * to prevent bypassing the tool's intended usage patterns.
+ */
+
 // Check if @tanstack/react-query is installed
 try {
   require("@tanstack/react-query");
@@ -7,13 +17,108 @@ try {
   throw new Error("\n\n[@buoy-gg/react-query] ERROR: Missing required peer dependency\n\n" + "This package requires @tanstack/react-query to be installed.\n\n" + "Install it with:\n" + "  npm install @tanstack/react-query\n" + "  or\n" + "  pnpm add @tanstack/react-query\n" + "  or\n" + "  yarn add @tanstack/react-query\n\n" + "For more information, visit: https://tanstack.com/query/latest\n");
 }
 
-// Export preset configuration (easiest way to add to FloatingDevTools!)
+// =============================================================================
+// PRESET (Primary entry point for users)
+// =============================================================================
 export { reactQueryToolPreset, createReactQueryTool, wifiTogglePreset, createWifiToggleTool } from "./preset";
 
-// React Query dev tools entry point
-// Re-export the full dev tools surface so consumers can tree-shake as needed
-export * from "./react-query";
-export * from "./react-query/components";
-export * from "./react-query/hooks";
-export * from "./react-query/utils";
-export * from "./react-query/types";
+// =============================================================================
+// QUERY CLIENT CONNECTION (Required for users to connect their QueryClient)
+// =============================================================================
+export { setQueryClient, disconnectQueryClient } from "./react-query/stores/reactQueryEventStore";
+
+// =============================================================================
+// COMPONENTS (For custom UI implementations)
+// =============================================================================
+
+// Main modals
+export { ReactQueryModal } from "./react-query/components/modals/ReactQueryModal";
+export { ReactQueryModalHeader } from "./react-query/components/modals/ReactQueryModalHeader";
+export { QueryBrowserModal } from "./react-query/components/modals/QueryBrowserModal";
+export { MutationBrowserModal } from "./react-query/components/modals/MutationBrowserModal";
+export { MutationEditorModal } from "./react-query/components/modals/MutationEditorModal";
+export { DataEditorModal } from "./react-query/components/modals/DataEditorModal";
+export { QueryBrowserFooter } from "./react-query/components/modals/QueryBrowserFooter";
+export { MutationBrowserFooter } from "./react-query/components/modals/MutationBrowserFooter";
+export { SwipeIndicator } from "./react-query/components/modals/SwipeIndicator";
+
+// Query browser components
+export { Explorer, QueryBrowser, QueryDetails, QueryInformation, QueryActions, QueryRow, QueryStatus, QueryStatusCount, QueryDetailsChip, MutationsList, MutationDetails, MutationInformation, MutationButton, MutationStatusCount, MutationDetailsChips, ActionButton, ClearCacheButton, NetworkToggleButton, StorageStatusCount } from "./react-query/components/query-browser";
+
+// Mode components
+export { QueryBrowserMode } from "./react-query/components/QueryBrowserMode";
+export { MutationBrowserMode } from "./react-query/components/MutationBrowserMode";
+export { MutationEditorMode } from "./react-query/components/MutationEditorMode";
+export { DataEditorMode } from "./react-query/components/DataEditorMode";
+export { QuerySelector } from "./react-query/components/QuerySelector";
+export { QueryDebugInfo } from "./react-query/components/QueryDebugInfo";
+export { WifiToggle } from "./react-query/components/WifiToggle";
+export { ReactQuerySection } from "./react-query/components/ReactQuerySection";
+export { ReactQueryDevToolsModal } from "./react-query/components/ReactQueryDevToolsModal";
+
+// Shared data viewer components
+export { VirtualizedDataExplorer, DataViewer, TypeLegend } from "@buoy-gg/shared-ui/dataViewer";
+
+// =============================================================================
+// HOOKS (For consuming React Query data)
+// =============================================================================
+export { default as useAllQueries } from "./react-query/hooks/useAllQueries";
+export { default as useAllMutations } from "./react-query/hooks/useAllMutations";
+export { useGetQueryByQueryKey, useGetQueryByQueryKeyWithVersion } from "./react-query/hooks/useSelectedQuery";
+export { useGetMutationById } from "./react-query/hooks/useSelectedMutation";
+export { default as useQueryStatusCounts } from "./react-query/hooks/useQueryStatusCounts";
+export { useStorageQueryCounts } from "./react-query/hooks/useStorageQueryCounts";
+export { useReactQueryState } from "./react-query/hooks/useReactQueryState";
+export { useActionButtons } from "./react-query/hooks/useActionButtons";
+export { useMutationActionButtons } from "./react-query/hooks/useMutationActionButtons";
+export { useModalManager } from "./react-query/hooks/useModalManager";
+export { useModalPersistence } from "./react-query/hooks/useModalPersistence";
+export { useWifiState } from "./react-query/hooks/useWifiState";
+
+// =============================================================================
+// UTILITIES (Public helpers only)
+// =============================================================================
+
+// Action utilities
+export { default as invalidate } from "./react-query/utils/actions/invalidate";
+export { default as refetch } from "./react-query/utils/actions/refetch";
+export { default as reset } from "./react-query/utils/actions/reset";
+export { default as remove } from "./react-query/utils/actions/remove";
+export { default as deleteItem } from "./react-query/utils/actions/deleteItem";
+export { default as triggerError } from "./react-query/utils/actions/triggerError";
+export { default as triggerLoading } from "./react-query/utils/actions/triggerLoading";
+
+// Query status utilities
+export * from "./react-query/utils/getQueryStatusLabel";
+export * from "./react-query/utils/getQueryStatusColor";
+
+// Storage utilities
+export * from "./react-query/utils/getStorageQueryCounts";
+export * from "./react-query/utils/storageQueryUtils";
+export * from "./react-query/utils/modalStorageOperations";
+
+// Data manipulation utilities
+export * from "./react-query/utils/updateNestedDataByPath";
+export * from "./react-query/utils/deleteNestedDataByPath";
+export { safeStringify, displayValue, parseDisplayValue } from "@buoy-gg/shared-ui";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export { isPlainObject } from "./react-query/types/types";
+
+// =============================================================================
+// INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
+// =============================================================================
+/** @internal */
+export { reactQueryEventStore } from "./react-query/stores/reactQueryEventStore";
+
+// =============================================================================
+// NOT EXPORTED (Internal controls)
+// =============================================================================
+// The following are intentionally NOT exported to prevent bypassing:
+// - getReactQueryEvents (internal store access)
+// - subscribeToReactQueryEvents (internal subscription)
+// - clearReactQueryEvents (internal store control)
+// - isReactQueryConnected (internal state query)

package/lib/module/preset.js

@@ -21,7 +21,7 @@ import { QueryIcon } from "@buoy-gg/floating-tools-core";
 import { Wifi } from "@buoy-gg/shared-ui";
 import { ReactQueryDevToolsModal } from "./react-query/components/ReactQueryDevToolsModal";
 import { onlineManager } from "@tanstack/react-query";
-import { devToolsStorageKeys, safeSetItem } from "@buoy-gg/shared-ui";
+import { devToolsStorageKeys, persistentStorage } from "@buoy-gg/shared-ui";
 
 // Empty component for toggle-only mode
 const EmptyComponent = () => null;
@@ -29,7 +29,7 @@ const EmptyComponent = () => null;
 // Save WiFi state to storage
 const saveWifiState = async enabled => {
   try {
-    await safeSetItem(devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
+    await persistentStorage.setItem(devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
   } catch (error) {
     // Failed to save WiFi state
   }

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

@@ -1,7 +1,9 @@
 "use strict";
 
-import { useCallback, useState } from "react";
+import { useCallback, useState, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import { ReactQueryModal } from "./modals/ReactQueryModal";
+import { reactQueryEventStore } from "../stores/reactQueryEventStore";
 
 /** Configuration options for the high-level React Query dev tools modal wrapper. */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,6 +17,16 @@ export function ReactQueryDevToolsModal({
   onMinimize,
   enableSharedModalDimensions = true
 }) {
+  // Get QueryClient and connect to event store for unified Events DevTools
+  const queryClient = useQueryClient();
+  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.isConnected()) {
+      reactQueryEventStore.setQueryClient(queryClient);
+    }
+    // Don't disconnect on unmount - keep the connection for unified Events DevTools
+  }, [queryClient]);
   const [selectedQueryKey, setSelectedQueryKey] = useState(undefined);
   const [selectedMutationId, setSelectedMutationId] = useState(undefined);
   const [activeFilter, setActiveFilter] = useState(null);

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

@@ -1,5 +1,6 @@
 "use strict";
 
+import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useState, useRef } from "react";
 import { useGetMutationById } from "../../hooks/useSelectedMutation";
 import { MutationBrowserMode } from "../MutationBrowserMode";
@@ -27,11 +28,18 @@ export function MutationBrowserModal({
   searchText = "",
   onSearchChange
 }) {
+  const queryClient = useQueryClient();
   const selectedMutation = useGetMutationById(selectedMutationId);
   const [internalActiveFilter, setInternalActiveFilter] = useState(null);
   const activeFilter = externalActiveFilter ?? internalActiveFilter;
   const setActiveFilter = externalOnFilterChange ?? setInternalActiveFilter;
 
+  // Clear mutation cache handler
+  const handleClearCache = 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] = useState("bottomSheet");
@@ -95,7 +103,8 @@ export function MutationBrowserModal({
     onTabChange: onTabChange,
     onBack: () => onMutationSelect(undefined),
     searchText: searchText,
-    onSearchChange: onSearchChange
+    onSearchChange: onSearchChange,
+    onClearCache: handleClearCache
   });
   const footerNode = /*#__PURE__*/_jsx(MutationBrowserFooter, {
     activeFilter: activeFilter,

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

@@ -1,5 +1,6 @@
 "use strict";
 
+import { useQueryClient } from "@tanstack/react-query";
 import { JsModal, ModalHeader, TabSelector } from "@buoy-gg/shared-ui";
 import { useGetQueryByQueryKey } from "../../hooks/useSelectedQuery";
 import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
@@ -8,7 +9,7 @@ import { QueryBrowserFooter } from "./QueryBrowserFooter";
 import { QueryFilterViewV3 } from "../QueryFilterViewV3";
 import { useState, useCallback, useEffect } from "react";
 import { View, StyleSheet } from "react-native";
-import { devToolsStorageKeys, useSafeAsyncStorage, buoyColors } from "@buoy-gg/shared-ui";
+import { devToolsStorageKeys, persistentStorage, buoyColors } from "@buoy-gg/shared-ui";
 import useAllQueries from "../../hooks/useAllQueries";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -28,9 +29,15 @@ export function QueryBrowserModal({
   searchText = "",
   onSearchChange
 }) {
+  const queryClient = useQueryClient();
   const selectedQuery = useGetQueryByQueryKey(selectedQueryKey);
   const allQueries = useAllQueries();
 
+  // Clear query cache handler
+  const handleClearCache = useCallback(() => {
+    queryClient.getQueryCache().clear();
+  }, [queryClient]);
+
   // Use external filter state if provided (for persistence), otherwise use internal state
   const [internalActiveFilter, setInternalActiveFilter] = useState(null);
   const activeFilter = externalActiveFilter ?? internalActiveFilter;
@@ -41,17 +48,11 @@ export function QueryBrowserModal({
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
   const [includedPatterns, setIncludedPatterns] = useState(new Set());
 
-  // AsyncStorage for persisting ignored patterns
-  const {
-    getItem: safeGetItem,
-    setItem: safeSetItem
-  } = useSafeAsyncStorage();
-
   // Load ignored patterns from storage on mount
   useEffect(() => {
     const loadFilters = async () => {
       try {
-        const stored = await safeGetItem(devToolsStorageKeys.reactQuery.ignoredPatterns());
+        const stored = await persistentStorage.getItem(devToolsStorageKeys.reactQuery.ignoredPatterns());
         if (stored) {
           const patterns = JSON.parse(stored);
           if (Array.isArray(patterns)) {
@@ -63,13 +64,13 @@ export function QueryBrowserModal({
       }
     };
     loadFilters();
-  }, [safeGetItem]);
+  }, []);
 
   // Load included patterns from storage on mount
   useEffect(() => {
     const loadFilters = async () => {
       try {
-        const stored = await safeGetItem(devToolsStorageKeys.reactQuery.includedPatterns());
+        const stored = await persistentStorage.getItem(devToolsStorageKeys.reactQuery.includedPatterns());
         if (stored) {
           const patterns = JSON.parse(stored);
           if (Array.isArray(patterns)) {
@@ -81,33 +82,33 @@ export function QueryBrowserModal({
       }
     };
     loadFilters();
-  }, [safeGetItem]);
+  }, []);
 
   // Save ignored patterns to storage when they change
   useEffect(() => {
     const saveFilters = async () => {
       try {
         const patterns = Array.from(ignoredPatterns);
-        await safeSetItem(devToolsStorageKeys.reactQuery.ignoredPatterns(), JSON.stringify(patterns));
+        await persistentStorage.setItem(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
   useEffect(() => {
     const saveFilters = async () => {
       try {
         const patterns = Array.from(includedPatterns);
-        await safeSetItem(devToolsStorageKeys.reactQuery.includedPatterns(), JSON.stringify(patterns));
+        await persistentStorage.setItem(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 = useCallback(pattern => {
@@ -173,7 +174,8 @@ export 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__*/_jsx(QueryBrowserFooter, {