@buoy-gg/react-query 3.0.1 → 4.0.1

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

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.getQueryStatusLabel = getQueryStatusLabel;
 /**
  * Converts a query object into a human-friendly status string for badge rendering.
- * Priority order: disabled > fetching > inactive > paused > stale > fresh
+ * Priority order: disabled > fetching > error > inactive > paused > stale > fresh
+ *
+ * "error" sits just below "fetching" so a hard-failed query (status === "error",
+ * i.e. failed with no cached data) surfaces as an error instead of hiding under
+ * "inactive"/"stale", while an in-flight retry still reads as "fetching". This
+ * is the single source of truth every consumer (cards, dots, counts, the Error
+ * filter) reads, and it matches the dashboard sidebar's error dot exactly.
  */
 function getQueryStatusLabel(query) {
   // Check disabled first - disabled queries won't automatically fetch
   if (query.isDisabled()) {
     return "disabled";
   }
-  return query.state.fetchStatus === "fetching" ? "fetching" : !query.getObserversCount() ? "inactive" : query.state.fetchStatus === "paused" ? "paused" : query.isStale() ? "stale" : "fresh";
+  return query.state.fetchStatus === "fetching" ? "fetching" : query.state.status === "error" ? "error" : !query.getObserversCount() ? "inactive" : query.state.fetchStatus === "paused" ? "paused" : query.isStale() ? "stale" : "fresh";
 }

package/lib/module/index.js

@@ -27,6 +27,11 @@ export { reactQueryToolPreset, createReactQueryTool, wifiTogglePreset, createWif
 // =============================================================================
 export { setQueryClient, disconnectQueryClient } from "./react-query/stores/reactQueryEventStore";
 
+// =============================================================================
+// EXTERNAL SYNC (Adapter factory for @buoy-gg/external-sync's useExternalSync)
+// =============================================================================
+export { createReactQuerySyncAdapter } from "./react-query/sync/reactQuerySyncAdapter";
+export { useReactQuerySyncAdapter } from "./react-query/sync/useReactQuerySyncAdapter";
 // =============================================================================
 // COMPONENTS (For custom UI implementations)
 // =============================================================================

package/lib/module/preset.js

@@ -34,6 +34,29 @@ const saveWifiState = async enabled => {
     // Failed to save WiFi state
   }
 };
+
+/**
+ * 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 persistentStorage.getItem(devToolsStorageKeys.settings.wifiEnabled());
+    if (savedState !== null) {
+      onlineManager.setOnline(savedState === "true");
+    }
+  } catch (error) {
+    // Failed to restore WiFi state
+  }
+};
+
+// Eagerly restore persisted WiFi state on import so offline mode survives reloads.
+restoreWifiState();
 import { useState, useEffect } from "react";
 
 /**

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

@@ -31,9 +31,12 @@ export 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 = 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/module/react-query/components/QuerySelector.js

@@ -76,7 +76,8 @@ export 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/module/react-query/components/modals/MutationBrowserFooter.js

@@ -16,7 +16,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function MutationBrowserFooter({
   activeFilter,
   onFilterChange,
-  modalMode
+  modalMode,
+  size = "default"
 }) {
   const isFloatingMode = modalMode === "floating";
   const insets = useSafeAreaInsets({
@@ -38,7 +39,8 @@ export function MutationBrowserFooter({
       style: styles.filterContainer,
       children: /*#__PURE__*/_jsx(MutationStatusCount, {
         activeFilter: activeFilter,
-        onFilterChange: onFilterChange
+        onFilterChange: onFilterChange,
+        size: size
       })
     })
   }, `footer-${isFloatingMode ? "floating" : "docked"}`);

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

@@ -15,7 +15,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export 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
@@ -32,7 +34,8 @@ export function QueryBrowserFooter({
       style: styles.filterContainer,
       children: /*#__PURE__*/_jsx(QueryStatusCount, {
         activeFilter: activeFilter,
-        onFilterChange: onFilterChange
+        onFilterChange: onFilterChange,
+        size: size
       })
     })
   });

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

@@ -3,6 +3,7 @@
 import { ModalHeader, TabSelector, Search, X, Filter, Trash, buoyColors } from "@buoy-gg/shared-ui";
 import { useState, useRef, useEffect } from "react";
 import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { WifiToggle } from "../WifiToggle";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Shared header for all React Query modals. Handles tab switching when browsing and presents
@@ -18,7 +19,8 @@ export function ReactQueryModalHeader({
   onSearchChange,
   onFilterPress,
   hasActiveFilters = false,
-  onClearCache
+  onClearCache,
+  showWifiToggle = false
 }) {
   const [isSearchActive, setIsSearchActive] = useState(false);
   const searchInputRef = useRef(null);
@@ -108,6 +110,18 @@ export function ReactQueryModalHeader({
             color: buoyColors.textSecondary
           })
         }) : null]
+      }) : showWifiToggle ? /*#__PURE__*/_jsxs(View, {
+        style: styles.tabRow,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.tabSelectorWrap,
+          children: /*#__PURE__*/_jsx(TabSelector, {
+            tabs: tabs,
+            activeTab: activeTab,
+            onTabChange: tab => onTabChange(tab)
+          })
+        }), /*#__PURE__*/_jsx(WifiToggle, {
+          size: 16
+        })]
       }) : /*#__PURE__*/_jsx(TabSelector, {
         tabs: tabs,
         activeTab: activeTab,
@@ -144,6 +158,15 @@ export function ReactQueryModalHeader({
   });
 }
 const styles = StyleSheet.create({
+  tabRow: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  tabSelectorWrap: {
+    flex: 1
+  },
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -1,6 +1,7 @@
 "use strict";
 
 import { View, StyleSheet, Animated } from "react-native";
+import { absoluteFill } from "@buoy-gg/shared-ui";
 import { useMemo } from "react";
 import { ChevronLeft, ChevronRight, buoyColors } from "@buoy-gg/shared-ui";
 
@@ -184,7 +185,7 @@ export function SwipeIndicator({
 }
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     zIndex: 1000,
     justifyContent: "center",
     alignItems: "center"

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

@@ -11,7 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 const MutationStatusCount = ({
   activeFilter,
-  onFilterChange
+  onFilterChange,
+  size = "default"
 }) => {
   const {
     pending,
@@ -57,7 +58,8 @@ const MutationStatusCount = ({
         isActive: activeFilter === "pending",
         onPress: event => handleFilterClick("pending", event),
         onTouchStart: handleTouchStart,
-        showLabel: true
+        showLabel: true,
+        size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
         label: "Success",
         color: "green",
@@ -65,7 +67,8 @@ const MutationStatusCount = ({
         isActive: activeFilter === "success",
         onPress: event => handleFilterClick("success", event),
         onTouchStart: handleTouchStart,
-        showLabel: true
+        showLabel: true,
+        size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
         label: "Error",
         color: "red",
@@ -73,7 +76,8 @@ const MutationStatusCount = ({
         isActive: activeFilter === "error",
         onPress: event => handleFilterClick("error", event),
         onTouchStart: handleTouchStart,
-        showLabel: true
+        showLabel: true,
+        size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
         label: "Paused",
         color: "purple",
@@ -81,7 +85,8 @@ const MutationStatusCount = ({
         isActive: activeFilter === "paused",
         onPress: event => handleFilterClick("paused", event),
         onTouchStart: handleTouchStart,
-        showLabel: true
+        showLabel: true,
+        size: size
       })]
     })
   });

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

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

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

@@ -13,8 +13,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 = {
@@ -60,7 +62,7 @@ const QueryStatus = ({
   const statusColors = getStatusColors(color);
   return /*#__PURE__*/_jsxs(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"
     }],
@@ -69,16 +71,16 @@ const QueryStatus = ({
     onPressIn: onTouchStart,
     activeOpacity: 0.7,
     children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.dot, {
+      style: [styles.dot, isLarge && styles.dotLarge, {
         backgroundColor: statusColors.dot
       }]
     }), showLabel && /*#__PURE__*/_jsx(Text, {
-      style: [styles.label],
+      style: [styles.label, isLarge && styles.labelLarge],
       numberOfLines: 1,
       ellipsizeMode: "tail",
       children: label
     }), count > 0 && /*#__PURE__*/_jsx(Text, {
-      style: [styles.count, {
+      style: [styles.count, isLarge && styles.countLarge, {
         color: statusColors.dot
       }],
       numberOfLines: 1,
@@ -99,23 +101,46 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 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: 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'
   }
 });
 export default QueryStatus;

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

@@ -10,7 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 const QueryStatusCount = ({
   activeFilter,
-  onFilterChange
+  onFilterChange,
+  size = "default"
 }) => {
   const {
     fresh,
@@ -64,6 +65,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("fresh", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
         label: "Loading",
         color: "blue",
@@ -72,6 +75,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("fetching", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
         label: "Paused",
         color: "purple",
@@ -80,6 +85,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("paused", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
         label: "Stale",
         color: "yellow",
@@ -88,6 +95,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("stale", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       }), /*#__PURE__*/_jsx(QueryStatus, {
         label: "Idle",
         color: "gray",
@@ -96,6 +105,8 @@ const QueryStatusCount = ({
         onPress: event => handleFilterClick("inactive", event),
         onTouchStart: handleTouchStart,
         showLabel: true // Always show labels now
+        ,
+        size: size
       })]
     })
   });

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

@@ -14,7 +14,9 @@ function useQueryStatusCounts() {
     stale: 0,
     fetching: 0,
     paused: 0,
-    inactive: 0
+    inactive: 0,
+    error: 0,
+    disabled: 0
   });
   useEffect(() => {
     const updateCounts = () => {
@@ -28,7 +30,9 @@ function useQueryStatusCounts() {
         stale: 0,
         fetching: 0,
         paused: 0,
-        inactive: 0
+        inactive: 0,
+        error: 0,
+        disabled: 0
       });
       setTimeout(() => setCounts(newCounts), 0);
     };

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

@@ -0,0 +1,52 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+export 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/module/react-query/sync/reactQuerySyncAdapter.js

@@ -0,0 +1,127 @@
+"use strict";
+
+/**
+ * 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.
+ */
+import { onlineManager } from "@tanstack/react-query";
+import { dehydrateQueryClient } from "./dehydrate";
+export 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: dehydrateQueryClient(queryClient),
+      isOnlineManagerOnline: onlineManager.isOnline()
+    }),
+    subscribe: onChange => {
+      const unsubQueries = queryClient.getQueryCache().subscribe(onChange);
+      const unsubMutations = queryClient.getMutationCache().subscribe(onChange);
+      const unsubOnline = 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;
+        onlineManager.setOnline(online);
+      }
+    }
+  };
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+import { useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { createReactQuerySyncAdapter } from "./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.
+ */
+export 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 = useQueryClient();
+  } catch {
+    queryClient = null;
+  }
+  return useMemo(() => queryClient ? createReactQuerySyncAdapter(queryClient) : null, [queryClient]);
+}

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

@@ -8,5 +8,5 @@ export 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";
 }

package/lib/module/react-query/utils/getQueryStatusLabel.js

@@ -2,12 +2,18 @@
 
 /**
  * Converts a query object into a human-friendly status string for badge rendering.
- * Priority order: disabled > fetching > inactive > paused > stale > fresh
+ * Priority order: disabled > fetching > error > inactive > paused > stale > fresh
+ *
+ * "error" sits just below "fetching" so a hard-failed query (status === "error",
+ * i.e. failed with no cached data) surfaces as an error instead of hiding under
+ * "inactive"/"stale", while an in-flight retry still reads as "fetching". This
+ * is the single source of truth every consumer (cards, dots, counts, the Error
+ * filter) reads, and it matches the dashboard sidebar's error dot exactly.
  */
 export function getQueryStatusLabel(query) {
   // Check disabled first - disabled queries won't automatically fetch
   if (query.isDisabled()) {
     return "disabled";
   }
-  return query.state.fetchStatus === "fetching" ? "fetching" : !query.getObserversCount() ? "inactive" : query.state.fetchStatus === "paused" ? "paused" : query.isStale() ? "stale" : "fresh";
+  return query.state.fetchStatus === "fetching" ? "fetching" : query.state.status === "error" ? "error" : !query.getObserversCount() ? "inactive" : query.state.fetchStatus === "paused" ? "paused" : query.isStale() ? "stale" : "fresh";
 }

package/lib/typescript/index.d.ts

@@ -9,6 +9,9 @@
  */
 export { reactQueryToolPreset, createReactQueryTool, wifiTogglePreset, createWifiToggleTool, } from "./preset";
 export { setQueryClient, disconnectQueryClient, type ReactQueryEvent, type ReactQueryEventType, } from "./react-query/stores/reactQueryEventStore";
+export { createReactQuerySyncAdapter } from "./react-query/sync/reactQuerySyncAdapter";
+export { useReactQuerySyncAdapter } from "./react-query/sync/useReactQuerySyncAdapter";
+export type { DehydratedState, DehydratedQuery, DehydratedMutation, ObserverState, } from "./react-query/sync/dehydrate";
 export { ReactQueryModal } from "./react-query/components/modals/ReactQueryModal";
 export { ReactQueryModalHeader } from "./react-query/components/modals/ReactQueryModalHeader";
 export { QueryBrowserModal } from "./react-query/components/modals/QueryBrowserModal";