@tanstack/react-query-devtools 4.26.1 → 4.28.0

package/build/lib/index.prod.mjs

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { useQueryClient, onlineManager, notifyManager } from '@tanstack/react-query';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import SuperJSON from 'superjson';
@@ -341,7 +342,9 @@ const Button = styled('button', (props, theme) => ({
   cursor: 'pointer'
 }));
 const QueryKeys = styled('span', {
-  display: 'inline-block',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '0.5em',
   fontSize: '0.9em'
 });
 const QueryKey = styled('span', {
@@ -695,7 +698,8 @@ function ReactQueryDevtools$1({
   containerElement: Container = 'aside',
   context,
   styleNonce,
-  panelPosition: initialPanelPosition = 'bottom'
+  panelPosition: initialPanelPosition = 'bottom',
+  errorTypes = []
 }) {
   const rootRef = React.useRef(null);
   const panelRef = React.useRef(null);
@@ -874,7 +878,8 @@ function ReactQueryDevtools$1({
     style: style,
     isOpen: isResolvedOpen,
     setIsOpen: setIsOpen,
-    onDragStart: e => handleDragStart(panelRef.current, e)
+    onDragStart: e => handleDragStart(panelRef.current, e),
+    errorTypes: errorTypes
   }))), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({
     type: "button"
   }, otherToggleButtonProps, {
@@ -939,6 +944,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     showCloseButton,
     position,
     closeButtonProps = {},
+    errorTypes = [],
     ...panelProps
   } = props;
   const {
@@ -1057,7 +1063,9 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
   }, "Bottom")) : null), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: '0.5em'
     }
   }, /*#__PURE__*/React.createElement(Input, {
     placeholder: "Filter",
@@ -1069,7 +1077,6 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     },
     style: {
       flex: '1',
-      marginRight: '.5em',
       width: '100%'
     }
   }), /*#__PURE__*/React.createElement(Select, {
@@ -1169,7 +1176,8 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
   }))), activeQueryHash && isOpen ? /*#__PURE__*/React.createElement(ActiveQuery, {
     activeQueryHash: activeQueryHash,
     queryCache: queryCache,
-    queryClient: queryClient
+    queryClient: queryClient,
+    errorTypes: errorTypes
   }) : null, showCloseButton ? /*#__PURE__*/React.createElement(Button, _extends({
     type: "button",
     "aria-controls": "ReactQueryDevtoolsPanel",
@@ -1194,7 +1202,8 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
 const ActiveQuery = ({
   queryCache,
   activeQueryHash,
-  queryClient
+  queryClient,
+  errorTypes
 }) => {
   var _useSubscribeToQueryC, _useSubscribeToQueryC2;
 
@@ -1220,10 +1229,44 @@ const ActiveQuery = ({
     promise == null ? void 0 : promise.catch(noop);
   };
 
+  const currentErrorTypeName = useMemo(() => {
+    if (activeQuery && activeQueryState != null && activeQueryState.error) {
+      const errorType = errorTypes.find(type => {
+        var _activeQueryState$err;
+
+        return type.initializer(activeQuery).toString() === ((_activeQueryState$err = activeQueryState.error) == null ? void 0 : _activeQueryState$err.toString());
+      });
+      return errorType == null ? void 0 : errorType.name;
+    }
+
+    return undefined;
+  }, [activeQuery, activeQueryState == null ? void 0 : activeQueryState.error, errorTypes]);
+
   if (!activeQuery || !activeQueryState) {
     return null;
   }
 
+  const triggerError = errorType => {
+    var _errorType$initialize;
+
+    const error = (_errorType$initialize = errorType == null ? void 0 : errorType.initializer(activeQuery)) != null ? _errorType$initialize : new Error('Unknown error from devtools');
+    const __previousQueryOptions = activeQuery.options;
+    activeQuery.setState({
+      status: 'error',
+      error,
+      fetchMeta: { ...activeQuery.state.fetchMeta,
+        __previousQueryOptions
+      }
+    });
+  };
+
+  const restoreQueryAfterLoadingOrError = () => {
+    activeQuery.fetch(activeQuery.state.fetchMeta.__previousQueryOptions, {
+      // Make sure this fetch will cancel the previous one
+      cancelRefetch: true
+    });
+  };
+
   return /*#__PURE__*/React.createElement(ActiveQueryPanel, null, /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '.5em',
@@ -1290,7 +1333,11 @@ const ActiveQuery = ({
     }
   }, "Actions"), /*#__PURE__*/React.createElement("div", {
     style: {
-      padding: '0.5em'
+      padding: '0.5em',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '0.5em',
+      alignItems: 'flex-end'
     }
   }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
@@ -1318,7 +1365,61 @@ const ActiveQuery = ({
     style: {
       background: defaultTheme.danger
     }
-  }, "Remove")), /*#__PURE__*/React.createElement("div", {
+  }, "Remove"), ' ', /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    onClick: () => {
+      if (activeQuery.state.data === undefined) {
+        restoreQueryAfterLoadingOrError();
+      } else {
+        const __previousQueryOptions = activeQuery.options; // Trigger a fetch in order to trigger suspense as well.
+
+        activeQuery.fetch({ ...__previousQueryOptions,
+          queryFn: () => {
+            return new Promise(() => {// Never resolve
+            });
+          },
+          cacheTime: -1
+        });
+        activeQuery.setState({
+          data: undefined,
+          status: 'loading',
+          fetchMeta: { ...activeQuery.state.fetchMeta,
+            __previousQueryOptions
+          }
+        });
+      }
+    },
+    style: {
+      background: defaultTheme.paused
+    }
+  }, activeQuery.state.status === 'loading' ? 'Restore' : 'Trigger', ' ', "loading"), ' ', errorTypes.length === 0 || activeQuery.state.status === 'error' ? /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    onClick: () => {
+      if (!activeQuery.state.error) {
+        triggerError();
+      } else {
+        queryClient.resetQueries(activeQuery);
+      }
+    },
+    style: {
+      background: defaultTheme.danger
+    }
+  }, activeQuery.state.status === 'error' ? 'Restore' : 'Trigger', " error") : /*#__PURE__*/React.createElement("label", null, "Trigger error:", /*#__PURE__*/React.createElement(Select, {
+    value: currentErrorTypeName != null ? currentErrorTypeName : '',
+    style: {
+      marginInlineStart: '.5em'
+    },
+    onChange: e => {
+      const errorType = errorTypes.find(t => t.name === e.target.value);
+      triggerError(errorType);
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    key: "",
+    value: ""
+  }), errorTypes.map(errorType => /*#__PURE__*/React.createElement("option", {
+    key: errorType.name,
+    value: errorType.name
+  }, errorType.name))))), /*#__PURE__*/React.createElement("div", {
     style: {
       background: defaultTheme.backgroundAlt,
       padding: '.5em',