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

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',
@@ -621,106 +627,94 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                       width: '100%',
                     }}
                   />
-                  {!filter ? (
-                    <>
-                      <Select
-                        aria-label="Sort queries"
-                        value={sort}
-                        onChange={(e) => setSort(e.target.value)}
-                        style={{
-                          flex: '1',
-                          minWidth: 75,
-                          marginRight: '.5em',
-                        }}
-                      >
-                        {Object.keys(sortFns).map((key) => (
-                          <option key={key} value={key}>
-                            Sort by {key}
-                          </option>
-                        ))}
-                      </Select>
-                      <Button
-                        type="button"
-                        onClick={() => setBaseSort((old) => old * -1)}
-                        style={{
-                          padding: '.3em .4em',
-                          marginRight: '.5em',
-                        }}
-                      >
-                        {baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
-                      </Button>
-                      <Button
-                        type="button"
-                        onClick={() => {
-                          if (isMockOffline) {
-                            onlineManager.setOnline(undefined)
-                            setMockOffline(false)
-                            window.dispatchEvent(new Event('online'))
-                          } else {
-                            onlineManager.setOnline(false)
-                            setMockOffline(true)
-                          }
-                        }}
-                        aria-label={
-                          isMockOffline
-                            ? 'Restore offline mock'
-                            : 'Mock offline behavior'
-                        }
-                        title={
-                          isMockOffline
-                            ? 'Restore offline mock'
-                            : 'Mock offline behavior'
-                        }
-                        style={{
-                          padding: '0',
-                          height: '2em',
-                        }}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="2em"
-                          height="2em"
-                          viewBox="0 0 24 24"
-                          stroke={isMockOffline ? theme.danger : 'currentColor'}
-                          fill="none"
-                        >
-                          {isMockOffline ? (
-                            <>
-                              <path
-                                stroke="none"
-                                d="M0 0h24v24H0z"
-                                fill="none"
-                              />
-                              <line x1="12" y1="18" x2="12.01" y2="18" />
-                              <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
-                              <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
-                              <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
-                              <line x1="3" y1="3" x2="21" y2="21" />
-                            </>
-                          ) : (
-                            <>
-                              <path
-                                stroke="none"
-                                d="M0 0h24v24H0z"
-                                fill="none"
-                              />
-                              <line x1="12" y1="18" x2="12.01" y2="18" />
-                              <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
-                              <path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
-                              <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
-                            </>
-                          )}
-                        </svg>
-                        <ScreenReader
-                          text={
-                            isMockOffline
-                              ? 'Restore offline mock'
-                              : 'Mock offline behavior'
-                          }
-                        />
-                      </Button>
-                    </>
-                  ) : null}
+                  <Select
+                    aria-label="Sort queries"
+                    value={sort}
+                    onChange={(e) => setSort(e.target.value)}
+                    style={{
+                      flex: '1',
+                      minWidth: 75,
+                      marginRight: '.5em',
+                    }}
+                  >
+                    {Object.keys(sortFns).map((key) => (
+                      <option key={key} value={key}>
+                        Sort by {key}
+                      </option>
+                    ))}
+                  </Select>
+                  <Button
+                    type="button"
+                    onClick={() => setBaseSort((old) => old * -1)}
+                    style={{
+                      padding: '.3em .4em',
+                      marginRight: '.5em',
+                    }}
+                  >
+                    {baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      if (isMockOffline) {
+                        onlineManager.setOnline(undefined)
+                        setMockOffline(false)
+                        window.dispatchEvent(new Event('online'))
+                      } else {
+                        onlineManager.setOnline(false)
+                        setMockOffline(true)
+                      }
+                    }}
+                    aria-label={
+                      isMockOffline
+                        ? 'Restore offline mock'
+                        : 'Mock offline behavior'
+                    }
+                    title={
+                      isMockOffline
+                        ? 'Restore offline mock'
+                        : 'Mock offline behavior'
+                    }
+                    style={{
+                      padding: '0',
+                      height: '2em',
+                    }}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="2em"
+                      height="2em"
+                      viewBox="0 0 24 24"
+                      stroke={isMockOffline ? theme.danger : 'currentColor'}
+                      fill="none"
+                    >
+                      {isMockOffline ? (
+                        <>
+                          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                          <line x1="12" y1="18" x2="12.01" y2="18" />
+                          <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+                          <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
+                          <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
+                          <line x1="3" y1="3" x2="21" y2="21" />
+                        </>
+                      ) : (
+                        <>
+                          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                          <line x1="12" y1="18" x2="12.01" y2="18" />
+                          <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+                          <path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+                          <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+                        </>
+                      )}
+                    </svg>
+                    <ScreenReader
+                      text={
+                        isMockOffline
+                          ? 'Restore offline mock'
+                          : 'Mock offline behavior'
+                      }
+                    />
+                  </Button>
                 </div>
               </div>
             </div>
@@ -749,7 +743,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
           <ActiveQuery
             activeQueryHash={activeQueryHash}
             queryCache={queryCache}
-            queryClient={queryClient}
+            queryClient={client}
           />
         ) : null}
 
@@ -1110,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'