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

package/build/lib/index.prod.esm.js

@@ -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', {
@@ -593,7 +596,7 @@ function Explorer({
   const makeProperty = sub => {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
-    } : defaultExpanded?.[sub.label];
+    } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
     return {
       ...sub,
       defaultExpanded: subDefaultExpanded
@@ -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);
@@ -727,7 +731,7 @@ function ReactQueryDevtools$1({
     document.addEventListener('mouseup', unsub, false);
   };
   React.useEffect(() => {
-    setIsResolvedOpen(isOpen ?? false);
+    setIsResolvedOpen(isOpen != null ? isOpen : false);
   }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
   // Toggle panel visibility before/after transition (depending on direction).
@@ -755,7 +759,8 @@ function ReactQueryDevtools$1({
     return;
   }, [isResolvedOpen]);
   React.useEffect(() => {
-    if (isResolvedOpen && rootRef.current?.parentElement) {
+    var _rootRef$current;
+    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
       const {
         parentElement
       } = rootRef.current;
@@ -839,7 +844,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, {
@@ -849,7 +855,7 @@ function ReactQueryDevtools$1({
     "aria-expanded": "false",
     onClick: e => {
       setIsOpen(true);
-      onToggleClick?.(e);
+      onToggleClick == null ? void 0 : onToggleClick(e);
     },
     style: {
       background: 'none',
@@ -902,6 +908,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     showCloseButton,
     position,
     closeButtonProps = {},
+    errorTypes = [],
     ...panelProps
   } = props;
   const {
@@ -1035,19 +1042,20 @@ 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",
     "aria-label": "Filter by queryhash",
-    value: filter ?? '',
+    value: filter != null ? filter : '',
     onChange: e => setFilter(e.target.value),
     onKeyDown: e => {
       if (e.key === 'Escape') setFilter('');
     },
     style: {
       flex: '1',
-      marginRight: '.5em',
       width: '100%'
     }
   }), /*#__PURE__*/React.createElement(Select, {
@@ -1079,6 +1087,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 +1156,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",
@@ -1164,26 +1174,67 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React.forwardRef(function ReactQu
     },
     onClick: e => {
       setIsOpen(false);
-      onCloseClick?.(e);
+      onCloseClick == null ? void 0 : onCloseClick(e);
     }
   }), "Close") : null));
 });
 const ActiveQuery = ({
   queryCache,
   activeQueryHash,
-  queryClient
+  queryClient,
+  errorTypes
 }) => {
+  var _useSubscribeToQueryC, _useSubscribeToQueryC2;
   const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
-  const activeQueryState = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.state);
-  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.isStale()) ?? false;
-  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.getObserversCount()) ?? 0;
+  const activeQueryState = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$getAll$fi;
+    return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
+  });
+  const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$getAll$fi2;
+    return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
+  })) != null ? _useSubscribeToQueryC : false;
+  const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$getAll$fi3;
+    return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
+  })) != null ? _useSubscribeToQueryC2 : 0;
   const handleRefetch = () => {
-    const promise = activeQuery?.fetch();
-    promise?.catch(noop);
+    const promise = activeQuery == null ? void 0 : activeQuery.fetch();
+    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,
+      // 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 +1251,7 @@ const ActiveQuery = ({
     style: {
       marginBottom: '.5em',
       display: 'flex',
-      alignItems: 'stretch',
+      alignItems: 'flex-start',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/React.createElement(Code, {
@@ -1250,7 +1301,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 +1333,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 != 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',
@@ -1358,21 +1471,37 @@ const QueryRow = /*#__PURE__*/React.memo(({
   activeQueryHash,
   queryCache
 }) => {
-  const queryHash = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.queryHash) ?? '';
-  const queryState = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.state);
-  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.isStale()) ?? false;
-  const isDisabled = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.isDisabled()) ?? false;
-  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.getObserversCount()) ?? 0;
+  var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
+  const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find;
+    return (_queryCache$find = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find.queryHash;
+  })) != null ? _useSubscribeToQueryC3 : '';
+  const queryState = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find2;
+    return (_queryCache$find2 = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find2.state;
+  });
+  const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find3;
+    return (_queryCache$find3 = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find3.isStale();
+  })) != null ? _useSubscribeToQueryC4 : false;
+  const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find4;
+    return (_queryCache$find4 = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find4.isDisabled();
+  })) != null ? _useSubscribeToQueryC5 : false;
+  const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find5;
+    return (_queryCache$find5 = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find5.getObserversCount();
+  })) != null ? _useSubscribeToQueryC6 : 0;
   if (!queryState) {
     return null;
   }