@buoy-gg/react-query 3.0.1 → 4.0.1

package/lib/commonjs/index.js

@@ -11,6 +11,8 @@ var _exportNames = {
   setQueryClient: true,
   disconnectQueryClient: true,
   reactQueryEventStore: true,
+  createReactQuerySyncAdapter: true,
+  useReactQuerySyncAdapter: true,
   ReactQueryModal: true,
   ReactQueryModalHeader: true,
   QueryBrowserModal: true,
@@ -316,6 +318,12 @@ Object.defineProperty(exports, "WifiToggle", {
     return _WifiToggle.WifiToggle;
   }
 });
+Object.defineProperty(exports, "createReactQuerySyncAdapter", {
+  enumerable: true,
+  get: function () {
+    return _reactQuerySyncAdapter.createReactQuerySyncAdapter;
+  }
+});
 Object.defineProperty(exports, "createReactQueryTool", {
   enumerable: true,
   get: function () {
@@ -484,6 +492,12 @@ Object.defineProperty(exports, "useReactQueryState", {
     return _useReactQueryState.useReactQueryState;
   }
 });
+Object.defineProperty(exports, "useReactQuerySyncAdapter", {
+  enumerable: true,
+  get: function () {
+    return _useReactQuerySyncAdapter.useReactQuerySyncAdapter;
+  }
+});
 Object.defineProperty(exports, "useStorageQueryCounts", {
   enumerable: true,
   get: function () {
@@ -504,6 +518,8 @@ Object.defineProperty(exports, "wifiTogglePreset", {
 });
 var _preset = require("./preset");
 var _reactQueryEventStore = require("./react-query/stores/reactQueryEventStore");
+var _reactQuerySyncAdapter = require("./react-query/sync/reactQuerySyncAdapter");
+var _useReactQuerySyncAdapter = require("./react-query/sync/useReactQuerySyncAdapter");
 var _ReactQueryModal = require("./react-query/components/modals/ReactQueryModal");
 var _ReactQueryModalHeader = require("./react-query/components/modals/ReactQueryModalHeader");
 var _QueryBrowserModal = require("./react-query/components/modals/QueryBrowserModal");
@@ -655,6 +671,10 @@ try {
 // QUERY CLIENT CONNECTION (Required for users to connect their QueryClient)
 // =============================================================================
 
+// =============================================================================
+// EXTERNAL SYNC (Adapter factory for @buoy-gg/external-sync's useExternalSync)
+// =============================================================================
+
 // =============================================================================
 // COMPONENTS (For custom UI implementations)
 // =============================================================================

package/lib/commonjs/preset.js

@@ -41,6 +41,29 @@ const saveWifiState = async enabled => {
   }
 };
 
+/**
+ * Restore the persisted WiFi state into onlineManager on app load.
+ *
+ * The toggle is rendered as a `toggle-only` tool whose state lives in
+ * `onlineManager`, not in a mounted React component. The `useWifiState` hook
+ * only restores when its component (the modal) mounts, so without this the
+ * persisted offline state is lost on reload and defaults back to online.
+ * Running this at module load ensures the saved state is applied eagerly.
+ */
+const restoreWifiState = async () => {
+  try {
+    const savedState = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.wifiEnabled());
+    if (savedState !== null) {
+      _reactQuery.onlineManager.setOnline(savedState === "true");
+    }
+  } catch (error) {
+    // Failed to restore WiFi state
+  }
+};
+
+// Eagerly restore persisted WiFi state on import so offline mode survives reloads.
+restoreWifiState();
+
 /**
  * WiFi icon component - uses hooks to subscribe to onlineManager changes.
  *

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

@@ -34,9 +34,12 @@ function QueryFilterViewV3({
       error: 0
     };
     queries.forEach(query => {
+      // Count by the status LABEL (single source of truth) so the Error chip's
+      // count matches exactly what the cards show and what the Error filter
+      // returns. (Previously error was counted off `state.error`, a different
+      // axis than the label, so the count, cards, and filter could disagree.)
       const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
-      if (status === "disabled") counts.disabled++;else if (status === "fresh") counts.fresh++;else if (status === "stale") counts.stale++;else if (status === "fetching") counts.fetching++;else if (status === "paused") counts.paused++;else if (status === "inactive") counts.inactive++;
-      if (query.state.error) counts.error++;
+      if (status === "disabled") counts.disabled++;else if (status === "error") counts.error++;else if (status === "fresh") counts.fresh++;else if (status === "stale") counts.stale++;else if (status === "fetching") counts.fetching++;else if (status === "paused") counts.paused++;else if (status === "inactive") counts.inactive++;
     });
     return counts;
   }, [queries]);

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

@@ -80,7 +80,8 @@ function QuerySelector({
               gray: "#6B7280",
               purple: "#8B5CF6",
               yellow: "#F59E0B",
-              green: "#10B981"
+              green: "#10B981",
+              red: "#EF4444"
             };
             const statusColor = colorMap[statusColorName] || "#6B7280";
             const isSelected = query === selectedQuery;

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

@@ -21,7 +21,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function MutationBrowserFooter({
   activeFilter,
   onFilterChange,
-  modalMode
+  modalMode,
+  size = "default"
 }) {
   const isFloatingMode = modalMode === "floating";
   const insets = (0, _sharedUi.useSafeAreaInsets)({
@@ -43,7 +44,8 @@ function MutationBrowserFooter({
       style: styles.filterContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationStatusCount.default, {
         activeFilter: activeFilter,
-        onFilterChange: onFilterChange
+        onFilterChange: onFilterChange,
+        size: size
       })
     })
   }, `footer-${isFloatingMode ? "floating" : "docked"}`);

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

@@ -20,7 +20,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function QueryBrowserFooter({
   activeFilter,
   onFilterChange,
-  isFloatingMode = true // Default to floating mode if not specified
+  isFloatingMode = true,
+  // Default to floating mode if not specified
+  size = "default"
 }) {
   // Use safe area insets with a minimum bottom padding of 16 for docked mode
   // This ensures proper spacing even on resized simulators or devices without home indicator
@@ -37,7 +39,8 @@ function QueryBrowserFooter({
       style: styles.filterContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatusCount.default, {
         activeFilter: activeFilter,
-        onFilterChange: onFilterChange
+        onFilterChange: onFilterChange,
+        size: size
       })
     })
   });

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

@@ -7,6 +7,7 @@ exports.ReactQueryModalHeader = ReactQueryModalHeader;
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _react = require("react");
 var _reactNative = require("react-native");
+var _WifiToggle = require("../WifiToggle");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Shared header for all React Query modals. Handles tab switching when browsing and presents
@@ -22,7 +23,8 @@ function ReactQueryModalHeader({
   onSearchChange,
   onFilterPress,
   hasActiveFilters = false,
-  onClearCache
+  onClearCache,
+  showWifiToggle = false
 }) {
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
   const searchInputRef = (0, _react.useRef)(null);
@@ -112,6 +114,18 @@ function ReactQueryModalHeader({
             color: _sharedUi.buoyColors.textSecondary
           })
         }) : null]
+      }) : showWifiToggle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.tabRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.tabSelectorWrap,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+            tabs: tabs,
+            activeTab: activeTab,
+            onTabChange: tab => onTabChange(tab)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_WifiToggle.WifiToggle, {
+          size: 16
+        })]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
         tabs: tabs,
         activeTab: activeTab,
@@ -148,6 +162,15 @@ function ReactQueryModalHeader({
   });
 }
 const styles = _reactNative.StyleSheet.create({
+  tabRow: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  tabSelectorWrap: {
+    flex: 1
+  },
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SwipeIndicator = SwipeIndicator;
 var _reactNative = require("react-native");
-var _react = require("react");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Morphing swipe indicator – thin line ➜ pill ➜ circle with a pop-out cue at
@@ -188,7 +188,7 @@ function SwipeIndicator({
 }
 const styles = _reactNative.StyleSheet.create({
   container: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._sharedUi.absoluteFill,
     zIndex: 1000,
     justifyContent: "center",
     alignItems: "center"

package/lib/commonjs/react-query/components/query-browser/MutationStatusCount.js

@@ -16,7 +16,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const MutationStatusCount = ({
   activeFilter,
-  onFilterChange
+  onFilterChange,
+  size = "default"
 }) => {
   const {
     pending,
@@ -62,7 +63,8 @@ const MutationStatusCount = ({
         isActive: activeFilter === "pending",
         onPress: event => handleFilterClick("pending", event),
         onTouchStart: handleTouchStart,
-        showLabel: true
+        showLabel: true,
+        size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
         label: "Success",
         color: "green",
@@ -70,7 +72,8 @@ const MutationStatusCount = ({
         isActive: activeFilter === "success",
         onPress: event => handleFilterClick("success", event),
         onTouchStart: handleTouchStart,
-        showLabel: true
+        showLabel: true,
+        size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
         label: "Error",
         color: "red",
@@ -78,7 +81,8 @@ const MutationStatusCount = ({
         isActive: activeFilter === "error",
         onPress: event => handleFilterClick("error", event),
         onTouchStart: handleTouchStart,
-        showLabel: true
+        showLabel: true,
+        size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
         label: "Paused",
         color: "purple",
@@ -86,7 +90,8 @@ const MutationStatusCount = ({
         isActive: activeFilter === "paused",
         onPress: event => handleFilterClick("paused", event),
         onTouchStart: handleTouchStart,
-        showLabel: true
+        showLabel: true,
+        size: size
       })]
     })
   });

package/lib/commonjs/react-query/components/query-browser/QueryRow.js

@@ -26,6 +26,9 @@ const QueryRow = ({
       case "disabled":
         return _sharedUi.buoyColors.textMuted + "80";
       // More muted for disabled
+      case "error":
+        return _sharedUi.buoyColors.error;
+      // red — failed with no cached data
       case "fresh":
         return _sharedUi.buoyColors.success;
       case "stale":

package/lib/commonjs/react-query/components/query-browser/QueryStatus.js

@@ -17,8 +17,10 @@ const QueryStatus = ({
   showLabel = true,
   isActive = false,
   onPress,
-  onTouchStart
+  onTouchStart,
+  size = "default"
 }) => {
+  const isLarge = size === "large";
   // Buoy theme color mapping for status indicators
   const getStatusColors = colorName => {
     const colorMap = {
@@ -64,7 +66,7 @@ const QueryStatus = ({
   const statusColors = getStatusColors(color);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools query status",
-    style: [styles.queryStatusTag, isActive && {
+    style: [styles.queryStatusTag, isLarge && styles.queryStatusTagLarge, isActive && {
       backgroundColor: statusColors.dot + "15",
       borderColor: statusColors.dot + "40"
     }],
@@ -73,16 +75,16 @@ const QueryStatus = ({
     onPressIn: onTouchStart,
     activeOpacity: 0.7,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.dot, {
+      style: [styles.dot, isLarge && styles.dotLarge, {
         backgroundColor: statusColors.dot
       }]
     }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.label],
+      style: [styles.label, isLarge && styles.labelLarge],
       numberOfLines: 1,
       ellipsizeMode: "tail",
       children: label
     }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.count, {
+      style: [styles.count, isLarge && styles.countLarge, {
         color: statusColors.dot
       }],
       numberOfLines: 1,
@@ -103,23 +105,46 @@ const styles = _reactNative.StyleSheet.create({
     borderWidth: 1,
     borderColor: _sharedUi.buoyColors.textMuted + "20"
   },
+  queryStatusTagLarge: {
+    borderRadius: 16,
+    paddingHorizontal: 13,
+    paddingVertical: 6,
+    height: 32,
+    gap: 7
+  },
   dot: {
     width: 6,
     height: 6,
     borderRadius: 3
   },
+  dotLarge: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
   label: {
     fontSize: 11,
     fontWeight: "500",
     color: _sharedUi.buoyColors.textSecondary,
     fontFamily: "system"
   },
+  labelLarge: {
+    fontSize: 13,
+    fontWeight: "600",
+    letterSpacing: 0.2,
+    fontFamily: '"SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
   count: {
     fontSize: 11,
     fontVariant: ["tabular-nums"],
     fontWeight: "600",
     marginLeft: "auto",
     fontFamily: "system"
+  },
+  countLarge: {
+    fontSize: 13,
+    fontWeight: "700",
+    fontFamily: '"SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
   }
 });
 var _default = exports.default = QueryStatus;

package/lib/commonjs/react-query/components/query-browser/QueryStatusCount.js

@@ -15,7 +15,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const QueryStatusCount = ({
   activeFilter,
-  onFilterChange
+  onFilterChange,
+  size = "default"
 }) => {
   const {
     fresh,
@@ -69,6 +70,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("fresh", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
         label: "Loading",
         color: "blue",
@@ -77,6 +80,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("fetching", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
         label: "Paused",
         color: "purple",
@@ -85,6 +90,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("paused", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
         label: "Stale",
         color: "yellow",
@@ -93,6 +100,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("stale", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
         label: "Idle",
         color: "gray",
@@ -101,6 +110,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("inactive", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       })]
     })
   });

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

@@ -19,7 +19,9 @@ function useQueryStatusCounts() {
     stale: 0,
     fetching: 0,
     paused: 0,
-    inactive: 0
+    inactive: 0,
+    error: 0,
+    disabled: 0
   });
   (0, _react.useEffect)(() => {
     const updateCounts = () => {
@@ -33,7 +35,9 @@ function useQueryStatusCounts() {
         stale: 0,
         fetching: 0,
         paused: 0,
-        inactive: 0
+        inactive: 0,
+        error: 0,
+        disabled: 0
       });
       setTimeout(() => setCounts(newCounts), 0);
     };

package/lib/commonjs/react-query/sync/dehydrate.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dehydrateQueryClient = dehydrateQueryClient;
+/**
+ * Dehydration for external sync — ported from buoy-desktop's
+ * react-query-external-sync/hydration.ts so the desktop dashboard can
+ * hydrate an identical mirror of the device's QueryClient.
+ */
+
+function dehydrateQueryClient(client) {
+  const mutations = client.getMutationCache().getAll().map(mutation => dehydrateMutation(mutation));
+  const queries = client.getQueryCache().getAll().map(query => dehydrateQuery(query));
+  return {
+    mutations,
+    queries
+  };
+}
+function dehydrateMutation(mutation) {
+  return {
+    mutationId: mutation.mutationId,
+    mutationKey: mutation.options.mutationKey,
+    state: mutation.state,
+    ...(mutation.options.scope && {
+      scope: mutation.options.scope
+    }),
+    ...(mutation.meta && {
+      meta: mutation.meta
+    })
+  };
+}
+function dehydrateQuery(query) {
+  const observerStates = query.observers.map(observer => ({
+    queryHash: query.queryHash,
+    options: observer.options,
+    // Remove queryFn from observer options so the dashboard can't accidentally
+    // run device fetch functions (they aren't serializable anyway)
+    queryFn: undefined
+  }));
+  return {
+    state: {
+      ...query.state,
+      ...(query.state.data !== undefined && {
+        data: query.state.data
+      })
+    },
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+    ...(query.meta && {
+      meta: query.meta
+    }),
+    observers: observerStates
+  };
+}

package/lib/commonjs/react-query/sync/reactQuerySyncAdapter.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createReactQuerySyncAdapter = createReactQuerySyncAdapter;
+var _reactQuery = require("@tanstack/react-query");
+var _dehydrate = require("./dehydrate");
+/**
+ * Sync adapter for the React Query tool, consumed by @buoy-gg/external-sync's
+ * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
+ * this package doesn't need a dependency on it).
+ *
+ * Action handlers are ported from buoy-desktop's react-query-external-sync
+ * (useSyncQueries.ts) so the dashboard keeps identical behavior, including
+ * the trigger/restore loading and error simulations used by the TanStack
+ * devtools UI.
+ */
+
+function createReactQuerySyncAdapter(queryClient) {
+  const getQuery = params => {
+    const {
+      queryHash
+    } = params;
+    const query = queryClient.getQueryCache().get(queryHash);
+    if (!query) {
+      throw new Error(`Query with hash "${queryHash}" not found`);
+    }
+    return query;
+  };
+  return {
+    version: 1,
+    getSnapshot: () => ({
+      dehydratedState: (0, _dehydrate.dehydrateQueryClient)(queryClient),
+      isOnlineManagerOnline: _reactQuery.onlineManager.isOnline()
+    }),
+    subscribe: onChange => {
+      const unsubQueries = queryClient.getQueryCache().subscribe(onChange);
+      const unsubMutations = queryClient.getMutationCache().subscribe(onChange);
+      const unsubOnline = _reactQuery.onlineManager.subscribe(onChange);
+      return () => {
+        unsubQueries();
+        unsubMutations();
+        unsubOnline();
+      };
+    },
+    actions: {
+      refetch: params => {
+        const query = getQuery(params);
+        // Swallow fetch rejections — the resulting error state syncs anyway
+        return query.fetch().catch(() => undefined);
+      },
+      invalidate: params => queryClient.invalidateQueries(getQuery(params)),
+      reset: params => queryClient.resetQueries(getQuery(params)),
+      remove: params => {
+        queryClient.removeQueries(getQuery(params));
+      },
+      setQueryData: params => {
+        const {
+          queryKey,
+          data
+        } = params;
+        queryClient.setQueryData(queryKey, data, {
+          updatedAt: Date.now()
+        });
+      },
+      triggerError: params => {
+        const query = getQuery(params);
+        const __previousQueryOptions = query.options;
+        query.setState({
+          status: "error",
+          error: new Error("Unknown error from devtools"),
+          fetchMeta: {
+            ...query.state.fetchMeta,
+            // @ts-expect-error This does exist
+            __previousQueryOptions
+          }
+        });
+      },
+      restoreError: params => queryClient.resetQueries(getQuery(params)),
+      triggerLoading: params => {
+        const query = getQuery(params);
+        const __previousQueryOptions = query.options;
+        // Trigger a fetch in order to trigger suspense as well
+        query.fetch({
+          ...__previousQueryOptions,
+          queryFn: () => new Promise(() => {
+            // Never resolve — simulates perpetual loading
+          }),
+          gcTime: -1
+        }).catch(() => undefined);
+        query.setState({
+          data: undefined,
+          status: "pending",
+          fetchMeta: {
+            ...query.state.fetchMeta,
+            // @ts-expect-error This does exist
+            __previousQueryOptions
+          }
+        });
+      },
+      restoreLoading: params => {
+        const query = getQuery(params);
+        const previousState = query.state;
+        const previousOptions = query.state.fetchMeta ? query.state.fetchMeta.__previousQueryOptions : null;
+        query.cancel({
+          silent: true
+        });
+        query.setState({
+          ...previousState,
+          fetchStatus: "idle",
+          fetchMeta: null
+        });
+        if (previousOptions) {
+          query.fetch(previousOptions).catch(() => undefined);
+        }
+      },
+      clearQueryCache: () => {
+        queryClient.getQueryCache().clear();
+      },
+      clearMutationCache: () => {
+        queryClient.getMutationCache().clear();
+      },
+      setOnline: params => {
+        const {
+          online
+        } = params;
+        _reactQuery.onlineManager.setOnline(online);
+      }
+    }
+  };
+}

package/lib/commonjs/react-query/sync/useReactQuerySyncAdapter.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReactQuerySyncAdapter = useReactQuerySyncAdapter;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+var _reactQuerySyncAdapter = require("./reactQuerySyncAdapter");
+/**
+ * Context-based variant of createReactQuerySyncAdapter for zero-config
+ * wiring (FloatingDevTools' auto external sync): reads the QueryClient from
+ * the surrounding QueryClientProvider. Returns null when rendered outside a
+ * provider so callers can skip registering the query tool.
+ */
+function useReactQuerySyncAdapter() {
+  let queryClient;
+  try {
+    // Just a context read — throws only when there is no provider above us,
+    // which never changes for a mounted tree, so hook order stays stable.
+    queryClient = (0, _reactQuery.useQueryClient)();
+  } catch {
+    queryClient = null;
+  }
+  return (0, _react.useMemo)(() => queryClient ? (0, _reactQuerySyncAdapter.createReactQuerySyncAdapter)(queryClient) : null, [queryClient]);
+}

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

@@ -12,5 +12,5 @@ function getQueryStatusColor({
   observerCount,
   isStale
 }) {
-  return queryState.fetchStatus === "fetching" ? "blue" : !observerCount ? "gray" : queryState.fetchStatus === "paused" ? "purple" : isStale ? "yellow" : "green";
+  return queryState.fetchStatus === "fetching" ? "blue" : queryState.status === "error" ? "red" : !observerCount ? "gray" : queryState.fetchStatus === "paused" ? "purple" : isStale ? "yellow" : "green";
 }