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

package/build/lib/index.prod.js

@@ -351,7 +351,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', {
@@ -614,7 +616,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
@@ -695,7 +697,8 @@ function ReactQueryDevtools$1({
   containerElement: Container = 'aside',
   queryClient,
   styleNonce,
-  panelPosition: initialPanelPosition = 'bottom'
+  panelPosition: initialPanelPosition = 'bottom',
+  errorTypes = []
 }) {
   const rootRef = React__namespace.useRef(null);
   const panelRef = React__namespace.useRef(null);
@@ -748,7 +751,7 @@ function ReactQueryDevtools$1({
     document.addEventListener('mouseup', unsub, false);
   };
   React__namespace.useEffect(() => {
-    setIsResolvedOpen(isOpen ?? false);
+    setIsResolvedOpen(isOpen != null ? isOpen : false);
   }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
   // Toggle panel visibility before/after transition (depending on direction).
@@ -776,7 +779,8 @@ function ReactQueryDevtools$1({
     return;
   }, [isResolvedOpen]);
   React__namespace.useEffect(() => {
-    if (isResolvedOpen && rootRef.current?.parentElement) {
+    var _rootRef$current;
+    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
       const {
         parentElement
       } = rootRef.current;
@@ -860,7 +864,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__namespace.createElement("button", _extends({
     type: "button"
   }, otherToggleButtonProps, {
@@ -870,7 +875,7 @@ function ReactQueryDevtools$1({
     "aria-expanded": "false",
     onClick: e => {
       setIsOpen(true);
-      onToggleClick?.(e);
+      onToggleClick == null ? void 0 : onToggleClick(e);
     },
     style: {
       background: 'none',
@@ -923,6 +928,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
     showCloseButton,
     position,
     closeButtonProps = {},
+    errorTypes = [],
     ...panelProps
   } = props;
   const {
@@ -1056,19 +1062,20 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
   }, "Bottom")) : null), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: '0.5em'
     }
   }, /*#__PURE__*/React__namespace.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__namespace.createElement(Select, {
@@ -1100,6 +1107,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
       } else {
         reactQuery.onlineManager.setOnline(false);
         setMockOffline(true);
+        window.dispatchEvent(new Event('offline'));
       }
     },
     "aria-label": isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
@@ -1168,7 +1176,8 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
   }))), activeQueryHash && isOpen ? /*#__PURE__*/React__namespace.createElement(ActiveQuery, {
     activeQueryHash: activeQueryHash,
     queryCache: queryCache,
-    queryClient: client
+    queryClient: client,
+    errorTypes: errorTypes
   }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(Button, _extends({
     type: "button",
     "aria-controls": "ReactQueryDevtoolsPanel",
@@ -1185,26 +1194,67 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
     },
     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 = React.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__namespace.createElement(ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       padding: '.5em',
@@ -1221,7 +1271,7 @@ const ActiveQuery = ({
     style: {
       marginBottom: '.5em',
       display: 'flex',
-      alignItems: 'stretch',
+      alignItems: 'flex-start',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/React__namespace.createElement(Code, {
@@ -1271,7 +1321,11 @@ const ActiveQuery = ({
     }
   }, "Actions"), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
-      padding: '0.5em'
+      padding: '0.5em',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '0.5em',
+      alignItems: 'flex-end'
     }
   }, /*#__PURE__*/React__namespace.createElement(Button, {
     type: "button",
@@ -1299,7 +1353,65 @@ const ActiveQuery = ({
     style: {
       background: defaultTheme.danger
     }
-  }, "Remove")), /*#__PURE__*/React__namespace.createElement("div", {
+  }, "Remove"), ' ', /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("label", null, "Trigger error:", /*#__PURE__*/React__namespace.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__namespace.createElement("option", {
+    key: "",
+    value: ""
+  }), errorTypes.map(errorType => /*#__PURE__*/React__namespace.createElement("option", {
+    key: errorType.name,
+    value: errorType.name
+  }, errorType.name))))), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       background: defaultTheme.backgroundAlt,
       padding: '.5em',
@@ -1379,21 +1491,37 @@ const QueryRow = /*#__PURE__*/React__namespace.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;
   }