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

package/src/devtools.tsx

@@ -1,11 +1,9 @@
 'use client'
 import * as React from 'react'
-import { useSyncExternalStore } from './useSyncExternalStore'
 import type {
   QueryCache,
   QueryClient,
   QueryKey as QueryKeyType,
-  ContextOptions,
 } from '@tanstack/react-query'
 import {
   useQueryClient,
@@ -42,7 +40,7 @@ import { getQueryStatusLabel, getQueryStatusColor } from './utils'
 import Explorer from './Explorer'
 import Logo from './Logo'
 
-export interface DevtoolsOptions extends ContextOptions {
+export interface DevtoolsOptions {
   /**
    * Set this true if you want the dev tools to default to being open
    */
@@ -79,9 +77,13 @@ export interface DevtoolsOptions extends ContextOptions {
    * nonce for style element for CSP
    */
   styleNonce?: string
+  /**
+   * Custom instance of QueryClient
+   */
+  queryClient?: QueryClient
 }
 
-interface DevtoolsPanelOptions extends ContextOptions {
+interface DevtoolsPanelOptions {
   /**
    * The standard React style object used to style a component with inline styles
    */
@@ -123,6 +125,10 @@ interface DevtoolsPanelOptions extends ContextOptions {
    * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
    */
   closeButtonProps?: React.ComponentPropsWithoutRef<'button'>
+  /**
+   * Custom instance of QueryClient
+   */
+  queryClient?: QueryClient
 }
 
 export function ReactQueryDevtools({
@@ -132,7 +138,7 @@ export function ReactQueryDevtools({
   toggleButtonProps = {},
   position = 'bottom-left',
   containerElement: Container = 'aside',
-  context,
+  queryClient,
   styleNonce,
   panelPosition: initialPanelPosition = 'bottom',
 }: DevtoolsOptions): React.ReactElement | null {
@@ -332,7 +338,7 @@ export function ReactQueryDevtools({
       <ThemeProvider theme={theme}>
         <ReactQueryDevtoolsPanel
           ref={panelRef as any}
-          context={context}
+          queryClient={queryClient}
           styleNonce={styleNonce}
           position={panelPosition}
           onPositionChange={setPanelPosition}
@@ -403,7 +409,7 @@ const useSubscribeToQueryCache = <T,>(
   getSnapshot: () => T,
   skip: boolean = false,
 ): T => {
-  return useSyncExternalStore(
+  return React.useSyncExternalStore(
     React.useCallback(
       (onStoreChange) => {
         if (!skip)
@@ -427,7 +433,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
     isOpen = true,
     styleNonce,
     setIsOpen,
-    context,
+    queryClient,
     onDragStart,
     onPositionChange,
     showCloseButton,
@@ -438,8 +444,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
 
   const { onClick: onCloseClick, ...otherCloseButtonProps } = closeButtonProps
 
-  const queryClient = useQueryClient({ context })
-  const queryCache = queryClient.getQueryCache()
+  const client = useQueryClient(queryClient)
+  const queryCache = client.getQueryCache()
 
   const [sort, setSort] = useLocalStorage(
     'reactQueryDevtoolsSortFn',
@@ -737,7 +743,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
           <ActiveQuery
             activeQueryHash={activeQueryHash}
             queryCache={queryCache}
-            queryClient={queryClient}
+            queryClient={client}
           />
         ) : null}
 
@@ -836,7 +842,7 @@ const ActiveQuery = ({
           style={{
             marginBottom: '.5em',
             display: 'flex',
-            alignItems: 'flex-start',
+            alignItems: 'stretch',
             justifyContent: 'space-between',
           }}
         >
@@ -1098,27 +1104,27 @@ const QueryRow = React.memo(
     const queryHash =
       useSubscribeToQueryCache(
         queryCache,
-        () => queryCache.find(queryKey)?.queryHash,
+        () => queryCache.find({ queryKey })?.queryHash,
       ) ?? ''
 
     const queryState = useSubscribeToQueryCache(
       queryCache,
-      () => queryCache.find(queryKey)?.state,
+      () => queryCache.find({ queryKey })?.state,
     )
 
     const isStale =
       useSubscribeToQueryCache(queryCache, () =>
-        queryCache.find(queryKey)?.isStale(),
+        queryCache.find({ queryKey })?.isStale(),
       ) ?? false
 
     const isDisabled =
       useSubscribeToQueryCache(queryCache, () =>
-        queryCache.find(queryKey)?.isDisabled(),
+        queryCache.find({ queryKey })?.isDisabled(),
       ) ?? false
 
     const observerCount =
       useSubscribeToQueryCache(queryCache, () =>
-        queryCache.find(queryKey)?.getObserversCount(),
+        queryCache.find({ queryKey })?.getObserversCount(),
       ) ?? 0
 
     if (!queryState) {

package/src/index.ts

@@ -1,13 +1,13 @@
 import * as devtools from './devtools'
 
-export const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'] =
+export const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =
   process.env.NODE_ENV !== 'development'
     ? function () {
         return null
       }
     : devtools.ReactQueryDevtools
 
-export const ReactQueryDevtoolsPanel: typeof devtools['ReactQueryDevtoolsPanel'] =
+export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
   process.env.NODE_ENV !== 'development'
     ? (function () {
         return null

package/build/lib/useSyncExternalStore.d.ts

@@ -1 +0,0 @@
-export { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';

package/build/lib/useSyncExternalStore.native.d.ts

@@ -1 +0,0 @@
-export { useSyncExternalStore } from 'use-sync-external-store/shim/index.native.js';

package/src/useSyncExternalStore.native.ts

@@ -1,3 +0,0 @@
-// Temporary workaround due to an issue with react-native uSES - https://github.com/TanStack/query/pull/3601
-// @ts-ignore
-export { useSyncExternalStore } from 'use-sync-external-store/shim/index.native.js'

package/src/useSyncExternalStore.ts

@@ -1,2 +0,0 @@
-// Temporary workaround due to an issue with react-native uSES - https://github.com/TanStack/query/pull/3601
-export { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'