@tanstack/react-query-devtools 4.13.5 → 4.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.13.5",
+  "version": "4.13.7",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",

package/src/devtools.tsx

@@ -22,6 +22,7 @@ import {
   getResizeHandleStyle,
   getSidedProp,
   defaultPanelSize,
+  displayValue,
 } from './utils'
 import type { Corner, Side } from './utils'
 import {
@@ -846,7 +847,7 @@ const ActiveQuery = ({
                 overflow: 'auto',
               }}
             >
-              {JSON.stringify(activeQuery.queryKey, null, 2)}
+              {displayValue(activeQuery.queryKey, true)}
             </pre>
           </Code>
           <span
@@ -1081,103 +1082,105 @@ interface QueryRowProps {
   queryCache: QueryCache
 }
 
-const QueryRow = ({
-  queryKey,
-  setActiveQueryHash,
-  activeQueryHash,
-  queryCache,
-}: QueryRowProps) => {
-  const queryHash =
-    useSubscribeToQueryCache(
-      queryCache,
-      () => queryCache.find(queryKey)?.queryHash,
-    ) ?? ''
-
-  const queryState = useSubscribeToQueryCache(
+const QueryRow = React.memo(
+  ({
+    queryKey,
+    setActiveQueryHash,
+    activeQueryHash,
     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
-  }
+  }: QueryRowProps) => {
+    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 (
-    <div
-      role="button"
-      aria-label={`Open query details for ${queryHash}`}
-      onClick={() =>
-        setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash)
-      }
-      style={{
-        display: 'flex',
-        borderBottom: `solid 1px ${theme.grayAlt}`,
-        cursor: 'pointer',
-        background:
-          queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined,
-      }}
-    >
+    return (
       <div
+        role="button"
+        aria-label={`Open query details for ${queryHash}`}
+        onClick={() =>
+          setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash)
+        }
         style={{
-          flex: '0 0 auto',
-          width: '2em',
-          height: '2em',
-          background: getQueryStatusColor({
-            queryState,
-            isStale,
-            observerCount,
-            theme,
-          }),
           display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontWeight: 'bold',
-          textShadow: isStale ? '0' : '0 0 10px black',
-          color: isStale ? 'black' : 'white',
+          borderBottom: `solid 1px ${theme.grayAlt}`,
+          cursor: 'pointer',
+          background:
+            queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined,
         }}
       >
-        {observerCount}
-      </div>
-      {isDisabled ? (
         <div
           style={{
             flex: '0 0 auto',
+            width: '2em',
             height: '2em',
-            background: theme.gray,
+            background: getQueryStatusColor({
+              queryState,
+              isStale,
+              observerCount,
+              theme,
+            }),
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'center',
             fontWeight: 'bold',
-            padding: '0 0.5em',
+            textShadow: isStale ? '0' : '0 0 10px black',
+            color: isStale ? 'black' : 'white',
           }}
         >
-          disabled
+          {observerCount}
         </div>
-      ) : null}
-      <Code
-        style={{
-          padding: '.5em',
-        }}
-      >
-        {`${queryHash}`}
-      </Code>
-    </div>
-  )
-}
+        {isDisabled ? (
+          <div
+            style={{
+              flex: '0 0 auto',
+              height: '2em',
+              background: theme.gray,
+              display: 'flex',
+              alignItems: 'center',
+              fontWeight: 'bold',
+              padding: '0 0.5em',
+            }}
+          >
+            disabled
+          </div>
+        ) : null}
+        <Code
+          style={{
+            padding: '.5em',
+          }}
+        >
+          {`${queryHash}`}
+        </Code>
+      </div>
+    )
+  },
+)
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}

package/src/utils.ts

@@ -117,11 +117,12 @@ export function useIsMounted() {
 /**
  * Displays a string regardless the type of the data
  * @param {unknown} value Value to be stringified
+ * @param {boolean} beautify Formats json to multiline
  */
-export const displayValue = (value: unknown) => {
+export const displayValue = (value: unknown, beautify: boolean = false) => {
   const { json } = SuperJSON.serialize(value)
 
-  return JSON.stringify(json)
+  return JSON.stringify(json, null, beautify ? 2 : undefined)
 }
 
 // Sorting functions