@tanstack/react-query-devtools 5.0.0-alpha.1 → 5.0.0-alpha.11

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';
@@ -330,7 +331,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', {
@@ -674,7 +677,8 @@ function ReactQueryDevtools$1({
   containerElement: Container = 'aside',
   queryClient,
   styleNonce,
-  panelPosition: initialPanelPosition = 'bottom'
+  panelPosition: initialPanelPosition = 'bottom',
+  errorTypes = []
 }) {
   const rootRef = React.useRef(null);
   const panelRef = React.useRef(null);
@@ -839,7 +843,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, {
@@ -902,6 +907,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     showCloseButton,
     position,
     closeButtonProps = {},
+    errorTypes = [],
     ...panelProps
   } = props;
   const {
@@ -1035,7 +1041,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",
@@ -1047,7 +1055,6 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     },
     style: {
       flex: '1',
-      marginRight: '.5em',
       width: '100%'
     }
   }), /*#__PURE__*/React.createElement(Select, {
@@ -1079,6 +1086,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
       } else {
         onlineManager.setOnline(false);
         setMockOffline(true);
+        window.dispatchEvent(new Event('offline'));
       }
     },
     "aria-label": isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
@@ -1147,7 +1155,8 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
   }))), activeQueryHash && isOpen ? /*#__PURE__*/React.createElement(ActiveQuery, {
     activeQueryHash: activeQueryHash,
     queryCache: queryCache,
-    queryClient: client
+    queryClient: client,
+    errorTypes: errorTypes
   }) : null, showCloseButton ? /*#__PURE__*/React.createElement(Button, _extends({
     type: "button",
     "aria-controls": "ReactQueryDevtoolsPanel",
@@ -1171,7 +1180,8 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
 const ActiveQuery = ({
   queryCache,
   activeQueryHash,
-  queryClient
+  queryClient,
+  errorTypes
 }) => {
   const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
   const activeQueryState = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.state);
@@ -1181,9 +1191,35 @@ const ActiveQuery = ({
     const promise = activeQuery?.fetch();
     promise?.catch(noop);
   };
+  const currentErrorTypeName = useMemo(() => {
+    if (activeQuery && activeQueryState?.error) {
+      const errorType = errorTypes.find(type => type.initializer(activeQuery).toString() === activeQueryState.error?.toString());
+      return errorType?.name;
+    }
+    return undefined;
+  }, [activeQuery, activeQueryState?.error, errorTypes]);
   if (!activeQuery || !activeQueryState) {
     return null;
   }
+  const triggerError = errorType => {
+    const error = errorType?.initializer(activeQuery) ?? new Error('Unknown error from devtools');
+    const __previousQueryOptions = activeQuery.options;
+    activeQuery.setState({
+      status: 'error',
+      error,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      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',
@@ -1200,7 +1236,7 @@ const ActiveQuery = ({
     style: {
       marginBottom: '.5em',
       display: 'flex',
-      alignItems: 'stretch',
+      alignItems: 'flex-start',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/React.createElement(Code, {
@@ -1250,7 +1286,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",
@@ -1278,7 +1318,65 @@ 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
+            });
+          },
+          gcTime: -1
+        });
+        activeQuery.setState({
+          data: undefined,
+          status: 'pending',
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+          fetchMeta: {
+            ...activeQuery.state.fetchMeta,
+            __previousQueryOptions
+          }
+        });
+      }
+    },
+    style: {
+      background: defaultTheme.paused
+    }
+  }, activeQuery.state.status === 'pending' ? '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 ?? '',
+    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',