@tanstack/react-query-devtools 5.0.0-alpha.2 → 5.0.0-alpha.21

package/src/styledComponents.ts

@@ -20,6 +20,8 @@ export const Panel = styled(
   },
 )
 
+Panel.displayName = 'Panel'
+
 export const ActiveQueryPanel = styled(
   'div',
   () => ({
@@ -36,6 +38,8 @@ export const ActiveQueryPanel = styled(
   },
 )
 
+ActiveQueryPanel.displayName = 'ActiveQueryPanel'
+
 export const Button = styled('button', (props, theme) => ({
   appearance: 'none',
   fontSize: '.9em',
@@ -49,11 +53,17 @@ export const Button = styled('button', (props, theme) => ({
   cursor: 'pointer',
 }))
 
+Button.displayName = 'Button'
+
 export const QueryKeys = styled('span', {
-  display: 'inline-block',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '0.5em',
   fontSize: '0.9em',
 })
 
+QueryKeys.displayName = 'QueryKeys'
+
 export const QueryKey = styled('span', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -63,12 +73,16 @@ export const QueryKey = styled('span', {
   borderRadius: '.2em',
 })
 
+QueryKey.displayName = 'QueryKey'
+
 export const Code = styled('code', {
   fontSize: '.9em',
   color: 'inherit',
   background: 'inherit',
 })
 
+Code.displayName = 'Code'
+
 export const Input = styled('input', (_props, theme) => ({
   backgroundColor: theme.inputBackgroundColor,
   border: 0,
@@ -79,6 +93,8 @@ export const Input = styled('input', (_props, theme) => ({
   padding: '.3em .4em',
 }))
 
+Input.displayName = 'Input'
+
 export const Select = styled(
   'select',
   (_props, theme) => ({
@@ -106,3 +122,5 @@ export const Select = styled(
     },
   },
 )
+
+Select.displayName = 'Select'

package/src/types.ts

@@ -0,0 +1,12 @@
+import type { Query, DefaultError } from '@tanstack/react-query'
+
+export interface DevToolsErrorType {
+  /**
+   * The name of the error.
+   */
+  name: string
+  /**
+   * How the error is initialized.
+   */
+  initializer: (query: Query) => DefaultError
+}

package/src/useSubscribeToQueryCache.ts

@@ -0,0 +1,26 @@
+import React from 'react'
+import type { QueryCache } from '@tanstack/react-query'
+import { notifyManager } from '@tanstack/react-query'
+
+const useSubscribeToQueryCache = <T>(
+  queryCache: QueryCache,
+  getSnapshot: () => T,
+  skip: boolean = false,
+): T => {
+  return React.useSyncExternalStore(
+    React.useCallback(
+      (onStoreChange) => {
+        if (!skip)
+          return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))
+        return () => {
+          return
+        }
+      },
+      [queryCache, skip],
+    ),
+    getSnapshot,
+    getSnapshot,
+  )
+}
+
+export default useSubscribeToQueryCache