feat(devtools): enable setting loading/error via devtools

docs/react/devtools.md

@@ -68,6 +68,8 @@ function App() {
   - The position of the React Query devtools panel
 - `context?: React.Context<QueryClient | undefined>`
   - Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => { toString(): string }}`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an item that can be stringified so we can check for it's presence on any given query.
 
 ## Embedded Mode
 

package.json

@@ -39,6 +39,7 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/react-17": "npm:@testing-library/react@12.1.4",
     "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "14.4.3",
     "@types/jest": "^26.0.4",
     "@types/luxon": "^2.3.1",
     "@types/node": "^17.0.25",

packages/query-core/src/query.ts

@@ -118,7 +118,7 @@ interface ContinueAction {
 
 interface SetStateAction<TData, TError> {
   type: 'setState'
-  state: QueryState<TData, TError>
+  state: Partial<QueryState<TData, TError>>
   setStateOptions?: SetStateOptions
 }
 
@@ -212,7 +212,7 @@ export class Query<
   }
 
   setState(
-    state: QueryState<TData, TError>,
+    state: Partial<QueryState<TData, TError>>,
     setStateOptions?: SetStateOptions,
   ): void {
     this.dispatch({ type: 'setState', state, setStateOptions })

packages/react-query-devtools/src/__tests__/devtools.test.tsx

@@ -11,6 +11,7 @@ import {
   sleep,
   createQueryClient,
 } from './utils'
+import UserEvent from '@testing-library/user-event'
 
 // TODO: This should be removed with the types for react-error-boundary get updated.
 declare module 'react-error-boundary' {
@@ -19,6 +20,13 @@ declare module 'react-error-boundary' {
   }
 }
 
+class CustomError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'CustomError'
+  }
+}
+
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation((query: string) => ({
@@ -915,4 +923,135 @@ 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(['key'], () => {
+        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(['key'], () => {
+        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(['key'], () => {
+        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()
+    })
+  })
 })