@buoy-gg/react-query 1.7.8 → 2.1.2

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/DataEditorMode.js

@@ -80,13 +80,11 @@ function DataEditorMode({
         paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.actionsGrid,
+        style: styles.actionsRow,
         children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          "sentry-label": `ignore action button ${action.label}`,
           onClick: action.onPress,
           text: action.label,
-          bgColorClass: action.bgColorClass,
-          _textColorClass: action.textColorClass,
+          variant: action.variant,
           disabled: action.disabled
         }, index))
       })
@@ -114,13 +112,11 @@ function DataEditorActionsFooter({
       paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
     }],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.actionsGrid,
+      style: styles.actionsRow,
       children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": `ignore action button ${action.label}`,
         onClick: action.onPress,
         text: action.label,
-        bgColorClass: action.bgColorClass,
-        _textColorClass: action.textColorClass,
+        variant: action.variant,
         disabled: action.disabled
       }, index))
     })
@@ -230,23 +226,20 @@ const styles = _reactNative.StyleSheet.create({
     lineHeight: 20,
     maxWidth: 280
   },
-  // Action footer matching main dev tools exactly
+  // Action footer - compact single row layout
   actionFooter: {
     borderTopWidth: 1,
     borderTopColor: _sharedUi.buoyColors.border,
-    paddingTop: 4,
+    paddingTop: 8,
     paddingHorizontal: 12,
     backgroundColor: _sharedUi.buoyColors.base,
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },
-  actionsGrid: {
+  actionsRow: {
     flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    // Reduced from 8
-    justifyContent: "space-between",
-    paddingBottom: 2
+    alignItems: "center",
+    gap: 8
   },
   // Query Explorer styled container matching QueryDetails
   queryExplorerContainer: {

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

@@ -73,11 +73,9 @@ function MutationEditorMode({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.actionsGrid,
         children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          "sentry-label": `ignore action button ${action.label}`,
           onClick: action.onPress,
           text: action.label,
-          bgColorClass: action.bgColorClass,
-          _textColorClass: action.textColorClass,
+          variant: action.variant,
           disabled: action.disabled
         }, index))
       })

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

@@ -40,7 +40,8 @@ function MutationBrowserModal({
   // Clear mutation cache handler
   const handleClearCache = (0, _react.useCallback)(() => {
     queryClient.getMutationCache().clear();
-  }, [queryClient]);
+    onMutationSelect(undefined);
+  }, [queryClient, onMutationSelect]);
 
   // Track modal mode for conditional styling
   // Initialize with bottomSheet but it will be updated from persisted state if available

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

@@ -52,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)) {
@@ -74,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)) {
@@ -92,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 => {

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

@@ -7,63 +7,54 @@ exports.default = ActionButton;
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
-// Define the color mappings using Buoy theme colors
+// Clean, minimal color config matching React Query DevTools style
 const buttonConfigs = {
-  btnRefetch: {
-    color: _sharedUi.buoyColors.success,
-    backgroundColor: _sharedUi.buoyColors.success + "15",
-    borderColor: _sharedUi.buoyColors.success + "40",
-    textColor: _sharedUi.buoyColors.success
+  refetch: {
+    dotColor: _sharedUi.buoyColors.success,
+    textColor: _sharedUi.buoyColors.text,
+    borderColor: _sharedUi.buoyColors.border
   },
-  btnInvalidate: {
-    color: _sharedUi.buoyColors.warning,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
-    borderColor: _sharedUi.buoyColors.warning + "40",
-    textColor: _sharedUi.buoyColors.warning
+  invalidate: {
+    dotColor: _sharedUi.buoyColors.warning,
+    textColor: _sharedUi.buoyColors.text,
+    borderColor: _sharedUi.buoyColors.border
   },
-  btnReset: {
-    color: _sharedUi.buoyColors.textSecondary,
-    backgroundColor: _sharedUi.buoyColors.textSecondary + "26",
-    borderColor: _sharedUi.buoyColors.textSecondary + "59",
-    textColor: _sharedUi.buoyColors.textSecondary
+  reset: {
+    dotColor: _sharedUi.buoyColors.textSecondary,
+    textColor: _sharedUi.buoyColors.text,
+    borderColor: _sharedUi.buoyColors.border
   },
-  btnRemove: {
-    color: _sharedUi.buoyColors.error,
-    backgroundColor: _sharedUi.buoyColors.error + "15",
-    borderColor: _sharedUi.buoyColors.error + "40",
-    textColor: _sharedUi.buoyColors.error
+  remove: {
+    dotColor: _sharedUi.buoyColors.error,
+    textColor: _sharedUi.buoyColors.error,
+    borderColor: _sharedUi.buoyColors.error + "40"
   },
-  btnTriggerLoading: {
-    color: _sharedUi.buoyColors.primary,
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderColor: _sharedUi.buoyColors.primary + "40",
-    textColor: _sharedUi.buoyColors.primary
+  triggerLoading: {
+    dotColor: _sharedUi.buoyColors.info,
+    textColor: _sharedUi.buoyColors.info,
+    borderColor: _sharedUi.buoyColors.info + "40"
   },
-  btnTriggerLoadiError: {
-    color: _sharedUi.buoyColors.textMuted,
-    backgroundColor: _sharedUi.buoyColors.textMuted + "26",
-    borderColor: _sharedUi.buoyColors.textMuted + "59",
-    textColor: _sharedUi.buoyColors.textMuted
+  triggerError: {
+    dotColor: _sharedUi.buoyColors.error,
+    textColor: _sharedUi.buoyColors.error,
+    borderColor: _sharedUi.buoyColors.error + "40"
   }
 };
-/** Generic rectangular action button used throughout the query modal footers. */
+/** Clean, minimal action button matching React Query DevTools style. */
 function ActionButton({
   onClick,
   text,
-  _textColorClass,
-  bgColorClass,
+  variant,
   disabled
 }) {
-  // Get the button configuration
-  const config = buttonConfigs[bgColorClass];
+  const config = buttonConfigs[variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools action button",
     disabled: disabled,
     onPress: onClick,
     style: [styles.button, {
-      backgroundColor: disabled ? _sharedUi.buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: disabled ? _sharedUi.buoyColors.textMuted + "33" : config.borderColor,
-      opacity: disabled ? 0.5 : 1
+      borderColor: disabled ? _sharedUi.buoyColors.border : config.borderColor,
+      opacity: disabled ? 0.4 : 1
     }],
     activeOpacity: 0.7,
     accessibilityRole: "button",
@@ -73,7 +64,7 @@ function ActionButton({
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? _sharedUi.buoyColors.textMuted : config.color
+        backgroundColor: disabled ? _sharedUi.buoyColors.textMuted : config.dotColor
       }]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.text, {
@@ -88,40 +79,20 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: 6,
-    // rectangular button shape
+    borderRadius: 4,
     borderWidth: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    height: 25,
-    minWidth: 80,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: "transparent"
   },
   dot: {
-    width: 5,
-    height: 5,
+    width: 6,
+    height: 6,
     borderRadius: 3,
-    marginRight: 6,
-    shadowColor: _sharedUi.buoyColors.text,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 2
+    marginRight: 6
   },
   text: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: "monospace",
-    height: 12
+    fontSize: 12,
+    fontWeight: "500"
   }
 });

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

@@ -29,108 +29,94 @@ function QueryActions({
     return null;
   }
   const queryStatus = query.state.status;
+  const isFetching = (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.headerText,
-      children: "Actions"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.buttonsContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query refetch action",
-        disabled: (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching",
-        onClick: () => {
-          (0, _refetch.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionLabel,
+        children: "Actions"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.buttonsRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: isFetching,
+          onClick: () => (0, _refetch.default)({
             query
-          });
-        },
-        bgColorClass: "btnRefetch",
-        text: "Refetch",
-        _textColorClass: "btnRefetch"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query invalidate action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          (0, _invalidate.default)({
+          }),
+          variant: "refetch",
+          text: "Refetch"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: queryStatus === "pending",
+          onClick: () => (0, _invalidate.default)({
             query,
             queryClient
-          });
-        },
-        bgColorClass: "btnInvalidate",
-        text: "Invalidate",
-        _textColorClass: "btnInvalidate"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query reset action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          (0, _reset.default)({
-            queryClient,
-            query
-          });
-        },
-        bgColorClass: "btnReset",
-        text: "Reset",
-        _textColorClass: "btnReset"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query remove action",
-        disabled: (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching",
-        onClick: () => {
-          (0, _remove.default)({
+          }),
+          variant: "invalidate",
+          text: "Invalidate"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: queryStatus === "pending",
+          onClick: () => (0, _reset.default)({
             queryClient,
             query
-          });
-          setSelectedQuery(undefined);
-        },
-        bgColorClass: "btnRemove",
-        text: "Remove",
-        _textColorClass: "btnRemove"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query trigger loading action",
-        disabled: false,
-        onClick: () => {
-          (0, _triggerLoading.default)({
+          }),
+          variant: "reset",
+          text: "Reset"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: isFetching,
+          onClick: () => {
+            (0, _remove.default)({
+              queryClient,
+              query
+            });
+            setSelectedQuery(undefined);
+          },
+          variant: "remove",
+          text: "Remove"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionLabel,
+        children: "Triggers"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.buttonsRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: false,
+          onClick: () => (0, _triggerLoading.default)({
             query
-          });
-        },
-        bgColorClass: "btnTriggerLoading",
-        text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
-        _textColorClass: "btnTriggerLoading"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query trigger error action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          (0, _triggerError.default)({
+          }),
+          variant: "triggerLoading",
+          text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: queryStatus === "pending",
+          onClick: () => (0, _triggerError.default)({
             query,
             queryClient
-          });
-        },
-        bgColorClass: "btnTriggerLoadiError",
-        text: queryStatus === "error" ? "Restore Error" : "Trigger Error",
-        _textColorClass: "btnTriggerLoadiError"
+          }),
+          variant: "triggerError",
+          text: queryStatus === "error" ? "Restore Error" : "Trigger Error"
+        })]
       })]
     })]
   });
 }
 const styles = _reactNative.StyleSheet.create({
   container: {
-    backgroundColor: _sharedUi.buoyColors.card,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
-    padding: 16,
-    gap: 12
+    gap: 16
+  },
+  section: {
+    gap: 8
   },
-  headerText: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
-    marginBottom: 8,
-    textAlign: "left",
-    fontFamily: "monospace",
-    letterSpacing: 1,
-    textTransform: "uppercase"
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
   },
-  buttonsContainer: {
+  buttonsRow: {
     flexDirection: "row",
     flexWrap: "wrap",
     gap: 8

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

@@ -11,14 +11,12 @@ var _triggerError = _interopRequireDefault(require("../utils/actions/triggerErro
 var _getQueryStatusLabel = require("../utils/getQueryStatusLabel");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * Derives the default action button configuration for an inspected query. Encapsulates business
- * rules around when to show refetch, loading, or error simulation actions.
+ * Derives compact action button configuration for the footer. Returns 3 essential buttons
+ * (Refetch, Loading, Error) optimized for small device footprints.
  *
  * @param selectedQuery - The query to derive actions for
  * @param queryClient - The query client for executing actions
  * @param queryVersion - Optional version number that increments on query state changes.
- *                       React Query mutates Query objects in place, so this version ensures
- *                       the useMemo recomputes when state changes.
  */
 function useActionButtons(selectedQuery, queryClient, queryVersion) {
   const actionButtons = (0, _react.useMemo)(() => {
@@ -26,24 +24,21 @@ function useActionButtons(selectedQuery, queryClient, queryVersion) {
     const isFetching = (0, _getQueryStatusLabel.getQueryStatusLabel)(selectedQuery) === "fetching";
     const buttons = [{
       label: "Refetch",
-      bgColorClass: "btnRefetch",
-      textColorClass: "btnRefetch",
+      variant: "refetch",
       disabled: isFetching,
       onPress: () => (0, _refetch.default)({
         query: selectedQuery
       })
     }, {
-      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore" : "Loading",
-      bgColorClass: "btnTriggerLoading",
-      textColorClass: "btnTriggerLoading",
+      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
+      variant: "triggerLoading",
       disabled: false,
       onPress: () => (0, _triggerLoading.default)({
         query: selectedQuery
       })
     }, {
-      label: queryStatus === "error" ? "Restore" : "Error",
-      bgColorClass: "btnTriggerLoadiError",
-      textColorClass: "btnTriggerLoadiError",
+      label: queryStatus === "error" ? "Restore Error" : "Trigger Error",
+      variant: "triggerError",
       disabled: queryStatus === "pending",
       onPress: () => (0, _triggerError.default)({
         query: selectedQuery,
@@ -51,9 +46,6 @@ function useActionButtons(selectedQuery, queryClient, queryVersion) {
       })
     }];
     return buttons;
-    // queryVersion is the key dependency that ensures this recomputes when query state changes.
-    // React Query mutates Query objects in place, so comparing selectedQuery.state.* values
-    // doesn't work reliably (the "previous" and "current" values read from the same mutated object).
   }, [selectedQuery, queryClient, queryVersion]);
   return actionButtons;
 }