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

package/build/umd/index.production.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.production.js","sources":["../../src/index.ts"],"sourcesContent":["import * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? (function () {\n        return null\n      } as any)\n    : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":"+QAIM,WACE,OAAO,gCAMR,WACC,OAAO"}
+{"version":3,"file":"index.production.js","sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? (function () {\n        return null\n      } as any)\n    : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":"+QAMM,WACE,OAAO,IACT,4BAKC,WACC,OAAO,IACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.11",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
-    "@tanstack/react-query": "5.0.0-alpha.1"
+    "@tanstack/react-query": "5.0.0-alpha.10"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.7.0",
@@ -52,13 +52,13 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "5.0.0-alpha.1"
+    "@tanstack/react-query": "5.0.0-alpha.10"
   },
   "scripts": {
     "clean": "rimraf ./build",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "test:types": "tsc",
-    "test:lib": "jest --config ./jest.config.ts",
+    "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
     "build:types": "tsc --build && cp build/lib/index.d.ts build/lib/index.prod.d.ts"
   }

package/src/__tests__/Explorer.test.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 
 import { chunkArray, CopyButton, DefaultRenderer } from '../Explorer'
 import { displayValue } from '../utils'
+import { vi } from 'vitest'
 
 describe('Explorer', () => {
   describe('chunkArray', () => {
@@ -30,7 +31,7 @@ describe('Explorer', () => {
 
   describe('DefaultRenderer', () => {
     it('when the entry label is clicked, toggle expanded', async () => {
-      const toggleExpanded = jest.fn()
+      const toggleExpanded = vi.fn()
 
       render(
         <DefaultRenderer
@@ -90,7 +91,7 @@ describe('Explorer', () => {
     })
 
     it('when the copy button is clicked but there is an error, show error state', async () => {
-      const consoleMock = jest.spyOn(console, 'error')
+      const consoleMock = vi.spyOn(console, 'error')
       consoleMock.mockImplementation(() => undefined)
 
       // Mock clipboard with error state

package/src/__tests__/devtools.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { fireEvent, screen, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, onlineManager } from '@tanstack/react-query'
 import { defaultPanelSize, sortFns } from '../utils'
 import {
   getByTextContent,
@@ -9,18 +9,27 @@ import {
   sleep,
   createQueryClient,
 } from './utils'
+import { vi } from 'vitest'
+import UserEvent from '@testing-library/user-event'
+
+class CustomError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'CustomError'
+  }
+}
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation((query: string) => ({
+  value: vi.fn().mockImplementation((query: string) => ({
     matches: false,
     media: query,
     onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
   })),
 })
 
@@ -31,8 +40,8 @@ describe('ReactQueryDevtools', () => {
   })
   it('should be able to open and close devtools', async () => {
     const { queryClient } = createQueryClient()
-    const onCloseClick = jest.fn()
-    const onToggleClick = jest.fn()
+    const onCloseClick = vi.fn()
+    const onToggleClick = vi.fn()
 
     function Page() {
       const { data = 'default' } = useQuery({
@@ -469,6 +478,31 @@ describe('ReactQueryDevtools', () => {
     expect(count).toBe(2)
   })
 
+  it('should inform onlineManager when offline mode is simulated', () => {
+    const { queryClient } = createQueryClient()
+    const online: Array<boolean> = []
+
+    const unsubscribe = onlineManager.subscribe(() => {
+      online.push(onlineManager.isOnline())
+    })
+
+    renderWithClient(queryClient, <div />, {
+      initialIsOpen: true,
+    })
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /mock offline behavior/i }),
+    )
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /restore offline mock/i }),
+    )
+
+    expect(online).toStrictEqual([false, true])
+
+    unsubscribe()
+  })
+
   it('should sort the queries according to the sorting filter', async () => {
     const { queryClient, queryCache } = createQueryClient()
 
@@ -861,4 +895,144 @@ describe('ReactQueryDevtools', () => {
     fireEvent.click(screen.getByRole('button', { name: /^close$/i }))
     expect(parentElement).toHaveStyle(parentPaddings)
   })
+
+  it('should simulate loading state', async () => {
+    const { queryClient } = createQueryClient()
+    let count = 0
+    function App() {
+      const { data, fetchStatus } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          count++
+          return Promise.resolve('test')
+        },
+      })
+
+      return (
+        <div>
+          <h1>
+            {data ?? 'No data'}, {fetchStatus}
+          </h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <App />, {
+      initialIsOpen: true,
+    })
+
+    await screen.findByRole('heading', { name: /test/i })
+
+    const loadingButton = await screen.findByRole('button', {
+      name: 'Trigger loading',
+    })
+    fireEvent.click(loadingButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('Restore loading')).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('No data, fetching')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /restore loading/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('test, idle')).toBeInTheDocument()
+    })
+
+    expect(count).toBe(2)
+  })
+
+  it('should simulate error state', async () => {
+    const { queryClient } = createQueryClient()
+    function App() {
+      const { status, error } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          return Promise.resolve('test')
+        },
+      })
+
+      return (
+        <div>
+          <h1>
+            {!!error ? 'Some error' : 'No error'}, {status}
+          </h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <App />, {
+      initialIsOpen: true,
+    })
+
+    const errorButton = await screen.findByRole('button', {
+      name: 'Trigger error',
+    })
+    fireEvent.click(errorButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('Restore error')).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Some error, error')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /Restore error/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('No error, success')).toBeInTheDocument()
+    })
+  })
+
+  it('should can simulate a specific error', async () => {
+    const { queryClient } = createQueryClient()
+
+    function App() {
+      const { status, error } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          return Promise.resolve('test')
+        },
+      })
+
+      return (
+        <div data-testid="test">
+          <h1>
+            {error instanceof CustomError
+              ? error.message.toString()
+              : 'No error'}
+            , {status}
+          </h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <App />, {
+      initialIsOpen: true,
+      errorTypes: [
+        {
+          name: 'error1',
+          initializer: () => new CustomError('error1'),
+        },
+      ],
+    })
+
+    const errorOption = await screen.findByLabelText('Trigger error:')
+
+    UserEvent.selectOptions(errorOption, 'error1')
+
+    await waitFor(() => {
+      expect(screen.getByText('error1, error')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /Restore error/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('No error, success')).toBeInTheDocument()
+    })
+  })
 })

package/src/devtools.tsx

@@ -4,6 +4,8 @@ import type {
   QueryCache,
   QueryClient,
   QueryKey as QueryKeyType,
+  Query,
+  DefaultError,
 } from '@tanstack/react-query'
 import {
   useQueryClient,
@@ -39,6 +41,18 @@ import { ThemeProvider, defaultTheme as theme } from './theme'
 import { getQueryStatusLabel, getQueryStatusColor } from './utils'
 import Explorer from './Explorer'
 import Logo from './Logo'
+import { useMemo } from 'react'
+
+export interface DevToolsErrorType {
+  /**
+   * The name of the error.
+   */
+  name: string
+  /**
+   * How the error is initialized.
+   */
+  initializer: (query: Query) => DefaultError
+}
 
 export interface DevtoolsOptions {
   /**
@@ -81,6 +95,10 @@ export interface DevtoolsOptions {
    * Custom instance of QueryClient
    */
   queryClient?: QueryClient
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: DevToolsErrorType[]
 }
 
 interface DevtoolsPanelOptions {
@@ -129,6 +147,10 @@ interface DevtoolsPanelOptions {
    * Custom instance of QueryClient
    */
   queryClient?: QueryClient
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: DevToolsErrorType[]
 }
 
 export function ReactQueryDevtools({
@@ -141,6 +163,7 @@ export function ReactQueryDevtools({
   queryClient,
   styleNonce,
   panelPosition: initialPanelPosition = 'bottom',
+  errorTypes = [],
 }: DevtoolsOptions): React.ReactElement | null {
   const rootRef = React.useRef<HTMLDivElement>(null)
   const panelRef = React.useRef<HTMLDivElement>(null)
@@ -349,6 +372,7 @@ export function ReactQueryDevtools({
           isOpen={isResolvedOpen}
           setIsOpen={setIsOpen}
           onDragStart={(e) => handleDragStart(panelRef.current, e)}
+          errorTypes={errorTypes}
         />
       </ThemeProvider>
       {!isResolvedOpen ? (
@@ -439,6 +463,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
     showCloseButton,
     position,
     closeButtonProps = {},
+    errorTypes = [],
     ...panelProps
   } = props
 
@@ -611,6 +636,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                   style={{
                     display: 'flex',
                     alignItems: 'center',
+                    flexWrap: 'wrap',
+                    gap: '0.5em',
                   }}
                 >
                   <Input
@@ -623,7 +650,6 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                     }}
                     style={{
                       flex: '1',
-                      marginRight: '.5em',
                       width: '100%',
                     }}
                   />
@@ -663,6 +689,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                       } else {
                         onlineManager.setOnline(false)
                         setMockOffline(true)
+                        window.dispatchEvent(new Event('offline'))
                       }
                     }}
                     aria-label={
@@ -744,6 +771,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
             activeQueryHash={activeQueryHash}
             queryCache={queryCache}
             queryClient={client}
+            errorTypes={errorTypes}
           />
         ) : null}
 
@@ -779,10 +807,12 @@ const ActiveQuery = ({
   queryCache,
   activeQueryHash,
   queryClient,
+  errorTypes,
 }: {
   queryCache: QueryCache
   activeQueryHash: string
   queryClient: QueryClient
+  errorTypes: DevToolsErrorType[]
 }) => {
   const activeQuery = useSubscribeToQueryCache(queryCache, () =>
     queryCache.getAll().find((query) => query.queryHash === activeQueryHash),
@@ -816,10 +846,50 @@ const ActiveQuery = ({
     promise?.catch(noop)
   }
 
+  const currentErrorTypeName = useMemo(() => {
+    if (activeQuery && activeQueryState?.error) {
+      const errorType = errorTypes.find(
+        (type) =>
+          type.initializer(activeQuery).toString() ===
+          activeQueryState.error?.toString(),
+      )
+      return errorType?.name
+    }
+    return undefined
+  }, [activeQuery, activeQueryState?.error, errorTypes])
+
   if (!activeQuery || !activeQueryState) {
     return null
   }
 
+  const triggerError = (errorType?: DevToolsErrorType) => {
+    const error =
+      errorType?.initializer(activeQuery) ??
+      new Error('Unknown error from devtools')
+
+    const __previousQueryOptions = activeQuery.options
+
+    activeQuery.setState({
+      status: 'error',
+      error,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      fetchMeta: {
+        ...activeQuery.state.fetchMeta,
+        __previousQueryOptions,
+      } as any,
+    })
+  }
+
+  const restoreQueryAfterLoadingOrError = () => {
+    activeQuery.fetch(
+      (activeQuery.state.fetchMeta as any).__previousQueryOptions,
+      {
+        // Make sure this fetch will cancel the previous one
+        cancelRefetch: true,
+      },
+    )
+  }
+
   return (
     <ActiveQueryPanel>
       <div
@@ -842,7 +912,7 @@ const ActiveQuery = ({
           style={{
             marginBottom: '.5em',
             display: 'flex',
-            alignItems: 'stretch',
+            alignItems: 'flex-start',
             justifyContent: 'space-between',
           }}
         >
@@ -916,6 +986,10 @@ const ActiveQuery = ({
       <div
         style={{
           padding: '0.5em',
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '0.5em',
+          alignItems: 'flex-end',
         }}
       >
         <Button
@@ -955,7 +1029,81 @@ const ActiveQuery = ({
           }}
         >
           Remove
-        </Button>
+        </Button>{' '}
+        <Button
+          type="button"
+          onClick={() => {
+            if (activeQuery.state.data === undefined) {
+              restoreQueryAfterLoadingOrError()
+            } else {
+              const __previousQueryOptions = activeQuery.options
+              // Trigger a fetch in order to trigger suspense as well.
+              activeQuery.fetch({
+                ...__previousQueryOptions,
+                queryFn: () => {
+                  return new Promise(() => {
+                    // Never resolve
+                  })
+                },
+                gcTime: -1,
+              })
+              activeQuery.setState({
+                data: undefined,
+                status: 'pending',
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+                fetchMeta: {
+                  ...activeQuery.state.fetchMeta,
+                  __previousQueryOptions,
+                } as any,
+              })
+            }
+          }}
+          style={{
+            background: theme.paused,
+          }}
+        >
+          {activeQuery.state.status === 'pending' ? 'Restore' : 'Trigger'}{' '}
+          loading
+        </Button>{' '}
+        {errorTypes.length === 0 || activeQuery.state.status === 'error' ? (
+          <Button
+            type="button"
+            onClick={() => {
+              if (!activeQuery.state.error) {
+                triggerError()
+              } else {
+                queryClient.resetQueries(activeQuery)
+              }
+            }}
+            style={{
+              background: theme.danger,
+            }}
+          >
+            {activeQuery.state.status === 'error' ? 'Restore' : 'Trigger'} error
+          </Button>
+        ) : (
+          <label>
+            Trigger error:
+            <Select
+              value={currentErrorTypeName ?? ''}
+              style={{ marginInlineStart: '.5em' }}
+              onChange={(e) => {
+                const errorType = errorTypes.find(
+                  (t) => t.name === e.target.value,
+                )
+
+                triggerError(errorType)
+              }}
+            >
+              <option key="" value="" />
+              {errorTypes.map((errorType) => (
+                <option key={errorType.name} value={errorType.name}>
+                  {errorType.name}
+                </option>
+              ))}
+            </Select>
+          </label>
+        )}
       </div>
       <div
         style={{

package/src/index.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import * as devtools from './devtools'
 
 export const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =

package/src/styledComponents.ts

@@ -50,7 +50,9 @@ export const Button = styled('button', (props, theme) => ({
 }))
 
 export const QueryKeys = styled('span', {
-  display: 'inline-block',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '0.5em',
   fontSize: '0.9em',
 })