@tanstack/react-query-devtools 4.24.9 → 5.0.0-alpha.0

package/build/lib/devtools.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactQuery = require('@tanstack/react-query');
@@ -13,10 +11,8 @@ var screenreader = require('./screenreader.js');
 var theme = require('./theme.js');
 var Explorer = require('./Explorer.js');
 var Logo = require('./Logo.js');
-var index_js = require('use-sync-external-store/shim/index.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -29,11 +25,11 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 function ReactQueryDevtools({
   initialIsOpen,
@@ -42,24 +38,22 @@ function ReactQueryDevtools({
   toggleButtonProps = {},
   position = 'bottom-left',
   containerElement: Container = 'aside',
-  context,
+  queryClient,
   styleNonce,
   panelPosition: initialPanelPosition = 'bottom'
 }) {
   const rootRef = React__namespace.useRef(null);
   const panelRef = React__namespace.useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage["default"]('reactQueryDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('reactQueryDevtoolsHeight', utils.defaultPanelSize);
-  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage["default"]('reactQueryDevtoolsWidth', utils.defaultPanelSize);
-  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage["default"]('reactQueryDevtoolsPanelPosition', initialPanelPosition);
+  const [isOpen, setIsOpen] = useLocalStorage.default('reactQueryDevtoolsOpen', initialIsOpen);
+  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage.default('reactQueryDevtoolsHeight', utils.defaultPanelSize);
+  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage.default('reactQueryDevtoolsWidth', utils.defaultPanelSize);
+  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage.default('reactQueryDevtoolsPanelPosition', initialPanelPosition);
   const [isResolvedOpen, setIsResolvedOpen] = React__namespace.useState(false);
   const [isResizing, setIsResizing] = React__namespace.useState(false);
   const isMounted = utils.useIsMounted();
-
   const handleDragStart = (panelElement, startEvent) => {
     if (!panelElement) return;
     if (startEvent.button !== 0) return; // Only allow left click for drag
-
     const isVertical = utils.isVerticalSide(panelPosition);
     setIsResizing(true);
     const {
@@ -69,12 +63,12 @@ function ReactQueryDevtools({
     const startX = startEvent.clientX;
     const startY = startEvent.clientY;
     let newSize = 0;
-
     const run = moveEvent => {
       // prevent mouse selecting stuff with mouse drag
-      moveEvent.preventDefault(); // calculate the correct size based on mouse position and current panel position
-      // hint: it is different formula for the opposite sides
+      moveEvent.preventDefault();
 
+      // calculate the correct size based on mouse position and current panel position
+      // hint: it is different formula for the opposite sides
       if (isVertical) {
         newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
         setDevtoolsWidth(newSize);
@@ -82,48 +76,41 @@ function ReactQueryDevtools({
         newSize = height + (panelPosition === 'bottom' ? startY - moveEvent.clientY : moveEvent.clientY - startY);
         setDevtoolsHeight(newSize);
       }
-
       if (newSize < utils.minPanelSize) {
         setIsOpen(false);
       } else {
         setIsOpen(true);
       }
     };
-
     const unsub = () => {
       if (isResizing) {
         setIsResizing(false);
       }
-
       document.removeEventListener('mousemove', run, false);
       document.removeEventListener('mouseUp', unsub, false);
     };
-
     document.addEventListener('mousemove', run, false);
     document.addEventListener('mouseup', unsub, false);
   };
-
   React__namespace.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
+  // Toggle panel visibility before/after transition (depending on direction).
+  // Prevents focusing in a closed panel.
   React__namespace.useEffect(() => {
     const ref = panelRef.current;
-
     if (ref) {
       const handlePanelTransitionStart = () => {
         if (isResolvedOpen) {
           ref.style.visibility = 'visible';
         }
       };
-
       const handlePanelTransitionEnd = () => {
         if (!isResolvedOpen) {
           ref.style.visibility = 'hidden';
         }
       };
-
       ref.addEventListener('transitionstart', handlePanelTransitionStart);
       ref.addEventListener('transitionend', handlePanelTransitionEnd);
       return () => {
@@ -131,19 +118,15 @@ function ReactQueryDevtools({
         ref.removeEventListener('transitionend', handlePanelTransitionEnd);
       };
     }
-
     return;
   }, [isResolvedOpen]);
   React__namespace.useEffect(() => {
-    var _rootRef$current;
-
-    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
+    if (isResolvedOpen && rootRef.current?.parentElement) {
       const {
         parentElement
       } = rootRef.current;
       const styleProp = utils.getSidedProp('padding', panelPosition);
       const isVertical = utils.isVerticalSide(panelPosition);
-
       const previousPaddings = (({
         padding,
         paddingTop,
@@ -157,20 +140,18 @@ function ReactQueryDevtools({
         paddingLeft,
         paddingRight
       }))(parentElement.style);
-
       const run = () => {
         // reset the padding
         parentElement.style.padding = '0px';
         parentElement.style.paddingTop = '0px';
         parentElement.style.paddingBottom = '0px';
         parentElement.style.paddingLeft = '0px';
-        parentElement.style.paddingRight = '0px'; // set the new padding based on the new panel position
+        parentElement.style.paddingRight = '0px';
+        // set the new padding based on the new panel position
 
-        parentElement.style[styleProp] = (isVertical ? devtoolsWidth : devtoolsHeight) + "px";
+        parentElement.style[styleProp] = `${isVertical ? devtoolsWidth : devtoolsHeight}px`;
       };
-
       run();
-
       if (typeof window !== 'undefined') {
         window.addEventListener('resize', run);
         return () => {
@@ -181,7 +162,6 @@ function ReactQueryDevtools({
         };
       }
     }
-
     return;
   }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
   const {
@@ -192,8 +172,9 @@ function ReactQueryDevtools({
     style: toggleButtonStyle = {},
     onClick: onToggleClick,
     ...otherToggleButtonProps
-  } = toggleButtonProps; // get computed style based on panel position
+  } = toggleButtonProps;
 
+  // get computed style based on panel position
   const style = utils.getSidePanelStyle({
     position: panelPosition,
     devtoolsTheme: theme.defaultTheme,
@@ -202,8 +183,9 @@ function ReactQueryDevtools({
     width: devtoolsWidth,
     isResizing,
     panelStyle
-  }); // Do not render on the server
+  });
 
+  // Do not render on the server
   if (!isMounted()) return null;
   return /*#__PURE__*/React__namespace.createElement(Container, {
     ref: rootRef,
@@ -211,9 +193,9 @@ function ReactQueryDevtools({
     "aria-label": "React Query Devtools"
   }, /*#__PURE__*/React__namespace.createElement(theme.ThemeProvider, {
     theme: theme.defaultTheme
-  }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel, _rollupPluginBabelHelpers.extends({
     ref: panelRef,
-    context: context,
+    queryClient: queryClient,
     styleNonce: styleNonce,
     position: panelPosition,
     onPositionChange: setPanelPosition,
@@ -224,7 +206,7 @@ function ReactQueryDevtools({
     isOpen: isResolvedOpen,
     setIsOpen: setIsOpen,
     onDragStart: e => handleDragStart(panelRef.current, e)
-  }))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers["extends"]({
+  }))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button"
   }, otherToggleButtonProps, {
     "aria-label": "Open React Query Devtools",
@@ -233,7 +215,7 @@ function ReactQueryDevtools({
     "aria-expanded": "false",
     onClick: e => {
       setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
+      onToggleClick?.(e);
     },
     style: {
       background: 'none',
@@ -261,28 +243,26 @@ function ReactQueryDevtools({
       }),
       ...toggleButtonStyle
     }
-  }), /*#__PURE__*/React__namespace.createElement(Logo["default"], {
+  }), /*#__PURE__*/React__namespace.createElement(Logo.default, {
     "aria-hidden": true
-  }), /*#__PURE__*/React__namespace.createElement(screenreader["default"], {
+  }), /*#__PURE__*/React__namespace.createElement(screenreader.default, {
     text: "Open React Query Devtools"
   })) : null);
 }
-
 const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
-  return index_js.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
+  return React__namespace.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
     if (!skip) return queryCache.subscribe(reactQuery.notifyManager.batchCalls(onStoreChange));
     return () => {
       return;
     };
   }, [queryCache, skip]), getSnapshot, getSnapshot);
 };
-
 const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
   const {
     isOpen = true,
     styleNonce,
     setIsOpen,
-    context,
+    queryClient,
     onDragStart,
     onPositionChange,
     showCloseButton,
@@ -294,23 +274,19 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
     onClick: onCloseClick,
     ...otherCloseButtonProps
   } = closeButtonProps;
-  const queryClient = reactQuery.useQueryClient({
-    context
-  });
-  const queryCache = queryClient.getQueryCache();
-  const [sort, setSort] = useLocalStorage["default"]('reactQueryDevtoolsSortFn', Object.keys(utils.sortFns)[0]);
-  const [filter, setFilter] = useLocalStorage["default"]('reactQueryDevtoolsFilter', '');
-  const [baseSort, setBaseSort] = useLocalStorage["default"]('reactQueryDevtoolsBaseSort', 1);
+  const client = reactQuery.useQueryClient(queryClient);
+  const queryCache = client.getQueryCache();
+  const [sort, setSort] = useLocalStorage.default('reactQueryDevtoolsSortFn', Object.keys(utils.sortFns)[0]);
+  const [filter, setFilter] = useLocalStorage.default('reactQueryDevtoolsFilter', '');
+  const [baseSort, setBaseSort] = useLocalStorage.default('reactQueryDevtoolsBaseSort', 1);
   const sortFn = React__namespace.useMemo(() => utils.sortFns[sort], [sort]);
   const queriesCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().length, !isOpen);
-  const [activeQueryHash, setActiveQueryHash] = useLocalStorage["default"]('reactQueryDevtoolsActiveQueryHash', '');
+  const [activeQueryHash, setActiveQueryHash] = useLocalStorage.default('reactQueryDevtoolsActiveQueryHash', '');
   const queries = React__namespace.useMemo(() => {
     const unsortedQueries = queryCache.getAll();
-
     if (queriesCount === 0) {
       return [];
     }
-
     const filtered = filter ? unsortedQueries.filter(item => matchSorterUtils.rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
     const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
     return sorted;
@@ -318,7 +294,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
   const [isMockOffline, setMockOffline] = React__namespace.useState(false);
   return /*#__PURE__*/React__namespace.createElement(theme.ThemeProvider, {
     theme: theme.defaultTheme
-  }, /*#__PURE__*/React__namespace.createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__namespace.createElement(styledComponents.Panel, _rollupPluginBabelHelpers.extends({
     ref: ref,
     className: "ReactQueryDevtoolsPanel",
     "aria-label": "React Query Devtools Panel",
@@ -332,7 +308,26 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
   }), /*#__PURE__*/React__namespace.createElement("style", {
     nonce: styleNonce,
     dangerouslySetInnerHTML: {
-      __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + theme.defaultTheme.backgroundAlt + " " + theme.defaultTheme.gray + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n              background: " + theme.defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + theme.defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + theme.defaultTheme.backgroundAlt + ";\n            }\n          "
+      __html: `
+            .ReactQueryDevtoolsPanel * {
+              scrollbar-color: ${theme.defaultTheme.backgroundAlt} ${theme.defaultTheme.gray};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {
+              background: ${theme.defaultTheme.backgroundAlt};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {
+              background: ${theme.defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${theme.defaultTheme.backgroundAlt};
+            }
+          `
     }
   }), /*#__PURE__*/React__namespace.createElement("div", {
     style: utils.getResizeHandleStyle(position),
@@ -343,7 +338,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
+      borderRight: `1px solid ${theme.defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -370,9 +365,9 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
       marginRight: '.5em',
       cursor: 'pointer'
     }
-  }, /*#__PURE__*/React__namespace.createElement(Logo["default"], {
+  }, /*#__PURE__*/React__namespace.createElement(Logo.default, {
     "aria-hidden": true
-  }), /*#__PURE__*/React__namespace.createElement(screenreader["default"], {
+  }), /*#__PURE__*/React__namespace.createElement(screenreader.default, {
     text: "Close React Query Devtools"
   })), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
@@ -411,7 +406,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
   }, /*#__PURE__*/React__namespace.createElement(styledComponents.Input, {
     placeholder: "Filter",
     "aria-label": "Filter by queryhash",
-    value: filter != null ? filter : '',
+    value: filter ?? '',
     onChange: e => setFilter(e.target.value),
     onKeyDown: e => {
       if (e.key === 'Escape') setFilter('');
@@ -421,7 +416,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
       marginRight: '.5em',
       width: '100%'
     }
-  }), !filter ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(styledComponents.Select, {
+  }), /*#__PURE__*/React__namespace.createElement(styledComponents.Select, {
     "aria-label": "Sort queries",
     value: sort,
     onChange: e => setSort(e.target.value),
@@ -500,9 +495,9 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
     d: "M6.343 12.343a8 8 0 0 1 11.314 0"
   }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"
-  }))), /*#__PURE__*/React__namespace.createElement(screenreader["default"], {
+  }))), /*#__PURE__*/React__namespace.createElement(screenreader.default, {
     text: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior'
-  }))) : null))), /*#__PURE__*/React__namespace.createElement("div", {
+  }))))), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       overflowY: 'auto',
       flex: '1'
@@ -518,8 +513,8 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
   }))), activeQueryHash && isOpen ? /*#__PURE__*/React__namespace.createElement(ActiveQuery, {
     activeQueryHash: activeQueryHash,
     queryCache: queryCache,
-    queryClient: queryClient
-  }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
+    queryClient: client
+  }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, _rollupPluginBabelHelpers.extends({
     type: "button",
     "aria-controls": "ReactQueryDevtoolsPanel",
     "aria-haspopup": "true",
@@ -535,44 +530,26 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
     },
     onClick: e => {
       setIsOpen(false);
-      onCloseClick == null ? void 0 : onCloseClick(e);
+      onCloseClick?.(e);
     }
   }), "Close") : null));
 });
-
 const ActiveQuery = ({
   queryCache,
   activeQueryHash,
   queryClient
 }) => {
-  var _useSubscribeToQueryC, _useSubscribeToQueryC2;
-
   const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
-  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 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 handleRefetch = () => {
-    const promise = activeQuery == null ? void 0 : activeQuery.fetch();
-    promise == null ? void 0 : promise.catch(noop);
+    const promise = activeQuery?.fetch();
+    promise?.catch(noop);
   };
-
   if (!activeQuery || !activeQueryState) {
     return null;
   }
-
   return /*#__PURE__*/React__namespace.createElement(styledComponents.ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       padding: '.5em',
@@ -679,7 +656,7 @@ const ActiveQuery = ({
     style: {
       padding: '.5em'
     }
-  }, /*#__PURE__*/React__namespace.createElement(Explorer["default"], {
+  }, /*#__PURE__*/React__namespace.createElement(Explorer.default, {
     label: "Data",
     value: activeQueryState.data,
     defaultExpanded: {},
@@ -696,7 +673,7 @@ const ActiveQuery = ({
     style: {
       padding: '.5em'
     }
-  }, /*#__PURE__*/React__namespace.createElement(Explorer["default"], {
+  }, /*#__PURE__*/React__namespace.createElement(Explorer.default, {
     label: "Query",
     value: activeQuery,
     defaultExpanded: {
@@ -704,7 +681,6 @@ const ActiveQuery = ({
     }
   })));
 };
-
 const QueryStatusCount = ({
   queryCache
 }) => {
@@ -742,52 +718,37 @@ const QueryStatusCount = ({
     }
   }, "inactive ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasInactive, ")")));
 };
-
 const QueryRow = /*#__PURE__*/React__namespace.memo(({
   queryKey,
   setActiveQueryHash,
   activeQueryHash,
   queryCache
 }) => {
-  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;
-
+  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;
   if (!queryState) {
     return null;
   }
-
   return /*#__PURE__*/React__namespace.createElement("div", {
     role: "button",
-    "aria-label": "Open query details for " + queryHash,
+    "aria-label": `Open query details for ${queryHash}`,
     onClick: () => setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash),
     style: {
       display: 'flex',
-      borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
+      borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
       cursor: 'pointer',
       background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
     }
@@ -823,9 +784,10 @@ const QueryRow = /*#__PURE__*/React__namespace.memo(({
     style: {
       padding: '.5em'
     }
-  }, "" + queryHash));
-}); // eslint-disable-next-line @typescript-eslint/no-empty-function
+  }, `${queryHash}`));
+});
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
 
 exports.ReactQueryDevtools = ReactQueryDevtools;