@tanstack/react-query 5.0.0-alpha.9 → 5.0.0-alpha.90

package/src/__tests__/QueryResetErrorBoundary.test.tsx

@@ -2,9 +2,9 @@ import { fireEvent, waitFor } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import * as React from 'react'
 
-import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
-import { QueryCache, QueryErrorResetBoundary, useQuery } from '..'
 import { vi } from 'vitest'
+import { QueryCache, QueryErrorResetBoundary, useQueries, useQuery } from '..'
+import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 
 // TODO: This should be removed with the types for react-error-boundary get updated.
 declare module 'react-error-boundary' {
@@ -17,647 +17,779 @@ describe('QueryErrorResetBoundary', () => {
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({ queryCache })
 
-  it('should retry fetch if the reset error boundary has been reset', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-    const key = queryKey()
-
-    let succeed = false
-
-    function Page() {
-      const { data } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          if (!succeed) {
-            throw new Error('Error')
-          } else {
-            return 'data'
-          }
-        },
-        retry: false,
-        throwErrors: true,
-      })
-      return <div>{data}</div>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    succeed = true
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('data'))
-    consoleMock.mockRestore()
-  })
-
-  it('should not throw error if query is disabled', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-    const key = queryKey()
-
-    let succeed = false
-
-    function Page() {
-      const { data, status } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          if (!succeed) {
-            throw new Error('Error')
-          } else {
-            return 'data'
-          }
-        },
-        retry: false,
-        enabled: !succeed,
-        throwErrors: true,
-      })
-      return (
-        <div>
-          <div>status: {status}</div>
-          <div>{data}</div>
-        </div>
+  describe('useQuery', () => {
+    it('should retry fetch if the reset error boundary has been reset', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+      const key = queryKey()
+
+      let succeed = false
+
+      function Page() {
+        const { data } = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            if (!succeed) {
+              throw new Error('Error')
+            } else {
+              return 'data'
+            }
+          },
+          retry: false,
+          throwOnError: true,
+        })
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
       )
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    succeed = true
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('status: error'))
-    consoleMock.mockRestore()
-  })
-
-  it('should not throw error if query is disabled, and refetch if query becomes enabled again', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-
-    const key = queryKey()
-
-    let succeed = false
 
-    function Page() {
-      const [enabled, setEnabled] = React.useState(false)
-      const { data } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          if (!succeed) {
-            throw new Error('Error')
-          } else {
-            return 'data'
-          }
-        },
-        retry: false,
-        enabled,
-        throwErrors: true,
-      })
-
-      React.useEffect(() => {
-        setEnabled(true)
-      }, [])
-
-      return <div>{data}</div>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    succeed = true
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('data'))
-    consoleMock.mockRestore()
-  })
-
-  it('should throw error if query is disabled and manually refetched', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-
-    const key = queryKey()
-
-    function Page() {
-      const { data, refetch, status, fetchStatus } = useQuery<string>({
-        queryKey: key,
-        queryFn: async () => {
-          throw new Error('Error')
-        },
-        retry: false,
-        enabled: false,
-        throwErrors: true,
-      })
-
-      return (
-        <div>
-          <button onClick={() => refetch()}>refetch</button>
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      succeed = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('data'))
+      consoleMock.mockRestore()
+    })
+
+    it('should not throw error if query is disabled', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+      const key = queryKey()
+
+      let succeed = false
+
+      function Page() {
+        const { data, status } = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            if (!succeed) {
+              throw new Error('Error')
+            } else {
+              return 'data'
+            }
+          },
+          retry: false,
+          enabled: !succeed,
+          throwOnError: true,
+        })
+        return (
           <div>
-            status: {status}, fetchStatus: {fetchStatus}
+            <div>status: {status}</div>
+            <div>{data}</div>
           </div>
-          <div>{data}</div>
-        </div>
+        )
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
       )
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() =>
-      rendered.getByText('status: pending, fetchStatus: idle'),
-    )
-    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
-    await waitFor(() => rendered.getByText('error boundary'))
-    consoleMock.mockRestore()
-  })
-
-  it('should not retry fetch if the reset error boundary has not been reset', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
 
-    const key = queryKey()
-
-    let succeed = false
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      succeed = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('status: error'))
+      consoleMock.mockRestore()
+    })
+
+    it('should not throw error if query is disabled, and refetch if query becomes enabled again', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      const key = queryKey()
+
+      let succeed = false
+
+      function Page() {
+        const [enabled, setEnabled] = React.useState(false)
+        const { data } = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            if (!succeed) {
+              throw new Error('Error')
+            } else {
+              return 'data'
+            }
+          },
+          retry: false,
+          enabled,
+          throwOnError: true,
+        })
+
+        React.useEffect(() => {
+          setEnabled(true)
+        }, [])
+
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-    function Page() {
-      const { data } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          if (!succeed) {
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      succeed = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('data'))
+      consoleMock.mockRestore()
+    })
+
+    it('should throw error if query is disabled and manually refetched', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      const key = queryKey()
+
+      function Page() {
+        const { data, refetch, status, fetchStatus } = useQuery<string>({
+          queryKey: key,
+          queryFn: async () => {
             throw new Error('Error')
-          } else {
-            return 'data'
-          }
-        },
-        retry: false,
-        throwErrors: true,
-      })
-      return <div>{data}</div>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {() => (
-          <ErrorBoundary
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    succeed = true
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('error boundary'))
-    consoleMock.mockRestore()
-  })
-
-  it('should retry fetch if the reset error boundary has been reset and the query contains data from a previous fetch', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-
-    const key = queryKey()
+          },
+          retry: false,
+          enabled: false,
+          throwOnError: true,
+        })
 
-    let succeed = false
-
-    function Page() {
-      const { data } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          if (!succeed) {
-            throw new Error('Error')
-          } else {
-            return 'data'
-          }
-        },
-        retry: false,
-        throwErrors: true,
-        initialData: 'initial',
-      })
-      return <div>{data}</div>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    succeed = true
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('data'))
-    consoleMock.mockRestore()
-  })
-
-  it('should not retry fetch if the reset error boundary has not been reset after a previous reset', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-
-    const key = queryKey()
+        return (
+          <div>
+            <button onClick={() => refetch()}>refetch</button>
+            <div>
+              status: {status}, fetchStatus: {fetchStatus}
+            </div>
+            <div>{data}</div>
+          </div>
+        )
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-    let succeed = false
-    let shouldReset = true
+      await waitFor(() =>
+        rendered.getByText('status: pending, fetchStatus: idle'),
+      )
+      fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
+      await waitFor(() => rendered.getByText('error boundary'))
+      consoleMock.mockRestore()
+    })
+
+    it('should not retry fetch if the reset error boundary has not been reset', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      const key = queryKey()
+
+      let succeed = false
+
+      function Page() {
+        const { data } = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            if (!succeed) {
+              throw new Error('Error')
+            } else {
+              return 'data'
+            }
+          },
+          retry: false,
+          throwOnError: true,
+        })
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {() => (
+            <ErrorBoundary
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-    function Page() {
-      const { data } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          if (!succeed) {
-            throw new Error('Error')
-          } else {
-            return 'data'
-          }
-        },
-        retry: false,
-        throwErrors: true,
-      })
-      return <div>{data}</div>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={() => {
-              if (shouldReset) {
-                reset()
-              }
-            }}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    shouldReset = true
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('error boundary'))
-    succeed = true
-    shouldReset = false
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('error boundary'))
-    consoleMock.mockRestore()
-  })
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      succeed = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('error boundary'))
+      consoleMock.mockRestore()
+    })
+
+    it('should retry fetch if the reset error boundary has been reset and the query contains data from a previous fetch', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      const key = queryKey()
+
+      let succeed = false
+
+      function Page() {
+        const { data } = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            if (!succeed) {
+              throw new Error('Error')
+            } else {
+              return 'data'
+            }
+          },
+          retry: false,
+          throwOnError: true,
+          initialData: 'initial',
+        })
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-  it('should throw again on error after the reset error boundary has been reset', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-
-    const key = queryKey()
-    let fetchCount = 0
-
-    function Page() {
-      const { data } = useQuery<string>({
-        queryKey: key,
-        queryFn: async () => {
-          fetchCount++
-          await sleep(10)
-          throw new Error('Error')
-        },
-        retry: false,
-        throwErrors: true,
-      })
-      return <div>{data}</div>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('error boundary'))
-    expect(fetchCount).toBe(3)
-    consoleMock.mockRestore()
-  })
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      succeed = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('data'))
+      consoleMock.mockRestore()
+    })
+
+    it('should not retry fetch if the reset error boundary has not been reset after a previous reset', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      const key = queryKey()
+
+      let succeed = false
+      let shouldReset = true
+
+      function Page() {
+        const { data } = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            if (!succeed) {
+              throw new Error('Error')
+            } else {
+              return 'data'
+            }
+          },
+          retry: false,
+          throwOnError: true,
+        })
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={() => {
+                if (shouldReset) {
+                  reset()
+                }
+              }}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-  it('should never render the component while the query is in error state', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-
-    const key = queryKey()
-    let fetchCount = 0
-    let renders = 0
-
-    function Page() {
-      const { data } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          fetchCount++
-          await sleep(10)
-          if (fetchCount > 2) {
-            return 'data'
-          } else {
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      shouldReset = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('error boundary'))
+      succeed = true
+      shouldReset = false
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('error boundary'))
+      consoleMock.mockRestore()
+    })
+
+    it('should throw again on error after the reset error boundary has been reset', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      const key = queryKey()
+      let fetchCount = 0
+
+      function Page() {
+        const { data } = useQuery<string>({
+          queryKey: key,
+          queryFn: async () => {
+            fetchCount++
+            await sleep(10)
             throw new Error('Error')
-          }
-        },
-        retry: false,
-        suspense: true,
-      })
-      renders++
-      return <div>{data}</div>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <React.Suspense fallback={<div>loading</div>}>
+          },
+          retry: false,
+          throwOnError: true,
+        })
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
               <Page />
-            </React.Suspense>
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('data'))
-    expect(fetchCount).toBe(3)
-    expect(renders).toBe(1)
-    consoleMock.mockRestore()
-  })
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-  it('should render children', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('error boundary'))
+      expect(fetchCount).toBe(3)
+      consoleMock.mockRestore()
+    })
+
+    it('should never render the component while the query is in error state', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      const key = queryKey()
+      let fetchCount = 0
+      let renders = 0
+
+      function Page() {
+        const { data } = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            fetchCount++
+            await sleep(10)
+            if (fetchCount > 2) {
+              return 'data'
+            } else {
+              throw new Error('Error')
+            }
+          },
+          retry: false,
+          suspense: true,
+        })
+        renders++
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <React.Suspense fallback={<div>loading</div>}>
+                <Page />
+              </React.Suspense>
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-    function Page() {
-      return (
-        <div>
-          <span>page</span>
-        </div>
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('data'))
+      expect(fetchCount).toBe(3)
+      expect(renders).toBe(1)
+      consoleMock.mockRestore()
+    })
+
+    it('should render children', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      function Page() {
+        return (
+          <div>
+            <span>page</span>
+          </div>
+        )
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          <Page />
+        </QueryErrorResetBoundary>,
       )
-    }
 
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        <Page />
-      </QueryErrorResetBoundary>,
-    )
+      expect(rendered.queryByText('page')).not.toBeNull()
+      consoleMock.mockRestore()
+    })
+
+    it('should show error boundary when using tracked queries even though we do not track the error field', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      const key = queryKey()
+
+      let succeed = false
+
+      function Page() {
+        const { data } = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            if (!succeed) {
+              throw new Error('Error')
+            } else {
+              return 'data'
+            }
+          },
+          retry: false,
+          throwOnError: true,
+        })
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-    expect(rendered.queryByText('page')).not.toBeNull()
-    consoleMock.mockRestore()
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      succeed = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('data'))
+      consoleMock.mockRestore()
+    })
   })
+  describe('useQueries', () => {
+    it('should retry fetch if the reset error boundary has been reset', async () => {
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+      const key = queryKey()
+
+      let succeed = false
+
+      function Page() {
+        const [{ data }] = useQueries({
+          queries: [
+            {
+              queryKey: key,
+              queryFn: async () => {
+                await sleep(10)
+                if (!succeed) {
+                  throw new Error('Error')
+                } else {
+                  return 'data'
+                }
+              },
+              retry: false,
+              throwOnError: true,
+              retryOnMount: true,
+            },
+          ],
+        })
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <Page />
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-  it('should show error boundary when using tracked queries even though we do not track the error field', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-
-    const key = queryKey()
-
-    let succeed = false
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      succeed = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('data'))
+      consoleMock.mockRestore()
+    })
+
+    it('with suspense should retry fetch if the reset error boundary has been reset', async () => {
+      const key = queryKey()
+      const consoleMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => undefined)
+
+      let succeed = false
+
+      function Page() {
+        const [{ data }] = useQueries({
+          queries: [
+            {
+              queryKey: key,
+              queryFn: async () => {
+                await sleep(10)
+                if (!succeed) {
+                  throw new Error('Error')
+                } else {
+                  return 'data'
+                }
+              },
+              retry: false,
+              throwOnError: true,
+              retryOnMount: true,
+              suspense: true,
+            },
+          ],
+        })
+        return <div>{data}</div>
+      }
+
+      const rendered = renderWithClient(
+        queryClient,
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              fallbackRender={({ resetErrorBoundary }) => (
+                <div>
+                  <div>error boundary</div>
+                  <button
+                    onClick={() => {
+                      resetErrorBoundary()
+                    }}
+                  >
+                    retry
+                  </button>
+                </div>
+              )}
+            >
+              <React.Suspense fallback="Loader">
+                <Page />
+              </React.Suspense>
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>,
+      )
 
-    function Page() {
-      const { data } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          if (!succeed) {
-            throw new Error('Error')
-          } else {
-            return 'data'
-          }
-        },
-        retry: false,
-        throwErrors: true,
-      })
-      return <div>{data}</div>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary
-            onReset={reset}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div>
-                <div>error boundary</div>
-                <button
-                  onClick={() => {
-                    resetErrorBoundary()
-                  }}
-                >
-                  retry
-                </button>
-              </div>
-            )}
-          >
-            <Page />
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>,
-    )
-
-    await waitFor(() => rendered.getByText('error boundary'))
-    await waitFor(() => rendered.getByText('retry'))
-    succeed = true
-    fireEvent.click(rendered.getByText('retry'))
-    await waitFor(() => rendered.getByText('data'))
-    consoleMock.mockRestore()
+      await waitFor(() => rendered.getByText('error boundary'))
+      await waitFor(() => rendered.getByText('retry'))
+      succeed = true
+      fireEvent.click(rendered.getByText('retry'))
+      await waitFor(() => rendered.getByText('data'))
+      consoleMock.mockRestore()
+    })
   })
 })