@tanstack/react-query 5.0.0-beta.9 → 5.0.0-rc.0

package/src/__tests__/suspense.test.tsx

@@ -5,21 +5,25 @@ import { vi } from 'vitest'
 import {
   QueryCache,
   QueryErrorResetBoundary,
-  useInfiniteQuery,
-  useQueries,
-  useQuery,
   useQueryErrorResetBoundary,
+  useSuspenseInfiniteQuery,
+  useSuspenseQueries,
+  useSuspenseQuery,
 } from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
-import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
+import type {
+  InfiniteData,
+  UseSuspenseInfiniteQueryResult,
+  UseSuspenseQueryResult,
+} from '..'
 
-describe("useQuery's in Suspense mode", () => {
+describe('useSuspenseQuery', () => {
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({ queryCache })
 
   it('should render the correct amount of times in Suspense mode', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseSuspenseQueryResult<number>> = []
 
     let count = 0
     let renders = 0
@@ -29,14 +33,13 @@ describe("useQuery's in Suspense mode", () => {
 
       const [stateKey, setStateKey] = React.useState(key)
 
-      const state = useQuery({
+      const state = useSuspenseQuery({
         queryKey: stateKey,
         queryFn: async () => {
           count++
           await sleep(10)
           return count
         },
-        suspense: true,
       })
 
       states.push(state)
@@ -69,18 +72,18 @@ describe("useQuery's in Suspense mode", () => {
 
   it('should return the correct states for a successful infinite query', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
+    const states: Array<UseSuspenseInfiniteQueryResult<InfiniteData<number>>> =
+      []
 
     function Page() {
       const [multiplier, setMultiplier] = React.useState(1)
-      const state = useInfiniteQuery({
+      const state = useSuspenseInfiniteQuery({
         queryKey: [`${key}_${multiplier}`],
         queryFn: async ({ pageParam }) => {
           await sleep(10)
           return Number(pageParam * multiplier)
         },
-        suspense: true,
-        defaultPageParam: 1,
+        initialPageParam: 1,
         getNextPageParam: (lastPage) => lastPage + 1,
       })
       states.push(state)
@@ -120,14 +123,14 @@ describe("useQuery's in Suspense mode", () => {
   it('should not call the queryFn twice when used in Suspense mode', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => {
       sleep(10)
       return 'data'
     })
 
     function Page() {
-      useQuery({ queryKey: [key], queryFn, suspense: true })
+      useSuspenseQuery({ queryKey: [key], queryFn })
 
       return <>rendered</>
     }
@@ -148,13 +151,12 @@ describe("useQuery's in Suspense mode", () => {
     const key = queryKey()
 
     function Page() {
-      useQuery({
+      useSuspenseQuery({
         queryKey: key,
         queryFn: () => {
           sleep(10)
           return 'data'
         },
-        suspense: true,
       })
 
       return <>rendered</>
@@ -200,7 +202,7 @@ describe("useQuery's in Suspense mode", () => {
     let succeed = false
 
     function Page() {
-      useQuery({
+      useSuspenseQuery({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -212,7 +214,6 @@ describe("useQuery's in Suspense mode", () => {
           }
         },
         retryDelay: 10,
-        suspense: true,
       })
 
       return <div>rendered</div>
@@ -272,7 +273,7 @@ describe("useQuery's in Suspense mode", () => {
     let succeed = false
 
     function Page() {
-      useQuery({
+      useSuspenseQuery({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -283,7 +284,6 @@ describe("useQuery's in Suspense mode", () => {
           }
         },
         retry: false,
-        suspense: true,
       })
       return <div>rendered</div>
     }
@@ -332,7 +332,7 @@ describe("useQuery's in Suspense mode", () => {
     let count = 0
 
     function Component() {
-      const result = useQuery({
+      const result = useSuspenseQuery({
         queryKey: key,
         queryFn: async () => {
           await sleep(100)
@@ -340,7 +340,6 @@ describe("useQuery's in Suspense mode", () => {
           return count
         },
         retry: false,
-        suspense: true,
         staleTime: 0,
       })
       return (
@@ -388,7 +387,7 @@ describe("useQuery's in Suspense mode", () => {
     const key2 = queryKey()
 
     function Component(props: { queryKey: Array<string> }) {
-      const result = useQuery({
+      const result = useSuspenseQuery({
         queryKey: props.queryKey,
         queryFn: async () => {
           await sleep(100)
@@ -396,7 +395,6 @@ describe("useQuery's in Suspense mode", () => {
         },
 
         retry: false,
-        suspense: true,
       })
       return <div>data: {result.data}</div>
     }
@@ -437,7 +435,7 @@ describe("useQuery's in Suspense mode", () => {
     let succeed = false
 
     function Page() {
-      useQuery({
+      useSuspenseQuery({
         queryKey: key,
         queryFn: async () => {
           await sleep(10)
@@ -448,7 +446,6 @@ describe("useQuery's in Suspense mode", () => {
           }
         },
         retry: false,
-        suspense: true,
       })
       return <div>rendered</div>
     }
@@ -499,14 +496,13 @@ describe("useQuery's in Suspense mode", () => {
     const key = queryKey()
 
     function Page() {
-      useQuery({
+      useSuspenseQuery({
         queryKey: key,
         queryFn: async (): Promise<unknown> => {
           await sleep(10)
           throw new Error('Suspense Error a1x')
         },
         retry: false,
-        suspense: true,
       })
       return <div>rendered</div>
     }
@@ -534,171 +530,6 @@ describe("useQuery's in Suspense mode", () => {
     consoleMock.mockRestore()
   })
 
-  it('should not throw errors to the error boundary when throwOnError: false', async () => {
-    const key = queryKey()
-
-    function Page() {
-      useQuery({
-        queryKey: key,
-        queryFn: async (): Promise<unknown> => {
-          await sleep(10)
-          throw new Error('Suspense Error a2x')
-        },
-        retry: false,
-        suspense: true,
-        throwOnError: false,
-      })
-      return <div>rendered</div>
-    }
-
-    function App() {
-      return (
-        <ErrorBoundary
-          fallbackRender={() => (
-            <div>
-              <div>error boundary</div>
-            </div>
-          )}
-        >
-          <React.Suspense fallback="Loading...">
-            <Page />
-          </React.Suspense>
-        </ErrorBoundary>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <App />)
-
-    await waitFor(() => rendered.getByText('Loading...'))
-    await waitFor(() => rendered.getByText('rendered'))
-  })
-
-  it('should throw errors to the error boundary when a throwOnError function returns true', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-    const key = queryKey()
-
-    function Page() {
-      useQuery({
-        queryKey: key,
-        queryFn: async (): Promise<unknown> => {
-          await sleep(10)
-          return Promise.reject(new Error('Remote Error'))
-        },
-        retry: false,
-        suspense: true,
-        throwOnError: (err) => err.message !== 'Local Error',
-      })
-      return <div>rendered</div>
-    }
-
-    function App() {
-      return (
-        <ErrorBoundary
-          fallbackRender={() => (
-            <div>
-              <div>error boundary</div>
-            </div>
-          )}
-        >
-          <React.Suspense fallback="Loading...">
-            <Page />
-          </React.Suspense>
-        </ErrorBoundary>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <App />)
-
-    await waitFor(() => rendered.getByText('Loading...'))
-    await waitFor(() => rendered.getByText('error boundary'))
-    consoleMock.mockRestore()
-  })
-
-  it('should not throw errors to the error boundary when a throwOnError function returns false', async () => {
-    const key = queryKey()
-
-    function Page() {
-      useQuery({
-        queryKey: key,
-        queryFn: async (): Promise<unknown> => {
-          await sleep(10)
-          return Promise.reject(new Error('Local Error'))
-        },
-        retry: false,
-        suspense: true,
-        throwOnError: (err) => err.message !== 'Local Error',
-      })
-      return <div>rendered</div>
-    }
-
-    function App() {
-      return (
-        <ErrorBoundary
-          fallbackRender={() => (
-            <div>
-              <div>error boundary</div>
-            </div>
-          )}
-        >
-          <React.Suspense fallback="Loading...">
-            <Page />
-          </React.Suspense>
-        </ErrorBoundary>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <App />)
-
-    await waitFor(() => rendered.getByText('Loading...'))
-    await waitFor(() => rendered.getByText('rendered'))
-  })
-
-  it('should not call the queryFn when not enabled', async () => {
-    const key = queryKey()
-
-    const queryFn = vi.fn<unknown[], Promise<string>>()
-    queryFn.mockImplementation(async () => {
-      await sleep(10)
-      return '23'
-    })
-
-    function Page() {
-      const [enabled, setEnabled] = React.useState(false)
-      const result = useQuery({
-        queryKey: [key],
-        queryFn,
-        suspense: true,
-        enabled,
-      })
-
-      return (
-        <div>
-          <button onClick={() => setEnabled(true)}>fire</button>
-          <h1>{result.data}</h1>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <React.Suspense fallback="loading">
-        <Page />
-      </React.Suspense>,
-    )
-
-    expect(queryFn).toHaveBeenCalledTimes(0)
-
-    fireEvent.click(rendered.getByRole('button', { name: /fire/i }))
-
-    await waitFor(() => {
-      expect(rendered.getByRole('heading').textContent).toBe('23')
-    })
-
-    expect(queryFn).toHaveBeenCalledTimes(1)
-  })
-
   it('should error catched in error boundary without infinite loop', async () => {
     const consoleMock = vi
       .spyOn(console, 'error')
@@ -710,7 +541,7 @@ describe("useQuery's in Suspense mode", () => {
     function Page() {
       const [nonce] = React.useState(0)
       const queryKeys = [`${key}-${succeed}`]
-      const result = useQuery({
+      const result = useSuspenseQuery({
         queryKey: queryKeys,
         queryFn: async () => {
           await sleep(10)
@@ -721,7 +552,6 @@ describe("useQuery's in Suspense mode", () => {
           }
         },
         retry: false,
-        suspense: true,
       })
       return (
         <div>
@@ -782,7 +612,7 @@ describe("useQuery's in Suspense mode", () => {
       const [key, rerender] = React.useReducer((x) => x + 1, 0)
       const queryKeys = [key, succeed]
 
-      const result = useQuery({
+      const result = useSuspenseQuery({
         queryKey: queryKeys,
         queryFn: async () => {
           await sleep(10)
@@ -793,8 +623,12 @@ describe("useQuery's in Suspense mode", () => {
           }
         },
         retry: false,
-        suspense: true,
       })
+
+      if (result.error) {
+        throw result.error
+      }
+
       return (
         <div>
           <span>rendered</span> <span>{result.data}</span>
@@ -839,77 +673,9 @@ describe("useQuery's in Suspense mode", () => {
     consoleMock.mockRestore()
   })
 
-  it('should error catched in error boundary without infinite loop when enabled changed', async () => {
-    const consoleMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => undefined)
-    function Page() {
-      const queryKeys = '1'
-      const [enabled, setEnabled] = React.useState(false)
-
-      const result = useQuery<string>({
-        queryKey: [queryKeys],
-        queryFn: async () => {
-          await sleep(10)
-          throw new Error('Suspense Error Bingo')
-        },
-
-        retry: false,
-        suspense: true,
-        enabled,
-      })
-      return (
-        <div>
-          <span>rendered</span> <span>{result.data}</span>
-          <button
-            aria-label="fail"
-            onClick={() => {
-              setEnabled(true)
-            }}
-          >
-            fail
-          </button>
-        </div>
-      )
-    }
-
-    function App() {
-      const { reset } = useQueryErrorResetBoundary()
-      return (
-        <ErrorBoundary
-          onReset={reset}
-          fallbackRender={() => <div>error boundary</div>}
-        >
-          <React.Suspense fallback="Loading...">
-            <Page />
-          </React.Suspense>
-        </ErrorBoundary>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <App />)
-
-    // render empty data with 'rendered' when enabled is false
-    await waitFor(() => rendered.getByText('rendered'))
-
-    // change enabled to true
-    fireEvent.click(rendered.getByLabelText('fail'))
-
-    // render pending fallback
-    await waitFor(() => rendered.getByText('Loading...'))
-
-    // render error boundary fallback (error boundary)
-    await waitFor(() => rendered.getByText('error boundary'))
-    expect(consoleMock).toHaveBeenCalledWith(
-      expect.objectContaining(new Error('Suspense Error Bingo')),
-    )
-
-    consoleMock.mockRestore()
-  })
-
   it('should render the correct amount of times in Suspense mode when gcTime is set to 0', async () => {
     const key = queryKey()
-    let state: UseQueryResult<number> | null = null
+    let state: UseSuspenseQueryResult<number> | null = null
 
     let count = 0
     let renders = 0
@@ -917,14 +683,13 @@ describe("useQuery's in Suspense mode", () => {
     function Page() {
       renders++
 
-      state = useQuery({
+      state = useSuspenseQuery({
         queryKey: key,
         queryFn: async () => {
           count++
           await sleep(10)
           return count
         },
-        suspense: true,
         gcTime: 0,
       })
 
@@ -952,67 +717,76 @@ describe("useQuery's in Suspense mode", () => {
     expect(renders).toBe(2)
     expect(rendered.queryByText('rendered')).not.toBeNull()
   })
-})
 
-describe('useQueries with suspense', () => {
-  const queryClient = createQueryClient()
-  it('should suspend all queries in parallel', async () => {
-    const key1 = queryKey()
-    const key2 = queryKey()
-    const results: string[] = []
-
-    function Fallback() {
-      results.push('loading')
-      return <div>loading</div>
-    }
+  it('should not throw background errors to the error boundary', async () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+    let succeed = true
+    const key = queryKey()
 
     function Page() {
-      const result = useQueries({
-        queries: [
-          {
-            queryKey: key1,
-            queryFn: async () => {
-              results.push('1')
-              await sleep(10)
-              return '1'
-            },
-            suspense: true,
-          },
-          {
-            queryKey: key2,
-            queryFn: async () => {
-              results.push('2')
-              await sleep(20)
-              return '2'
-            },
-            suspense: true,
-          },
-        ],
+      const result = useSuspenseQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          if (!succeed) {
+            throw new Error('Suspense Error Bingo')
+          } else {
+            return 'data'
+          }
+        },
+        retry: false,
       })
+
       return (
         <div>
-          <h1>data: {result.map((it) => it.data ?? 'null').join(',')}</h1>
+          <span>
+            rendered {result.data} {result.status}
+          </span>
+          <button onClick={() => result.refetch()}>refetch</button>
         </div>
       )
     }
 
-    const rendered = renderWithClient(
-      queryClient,
-      <React.Suspense fallback={<Fallback />}>
-        <Page />
-      </React.Suspense>,
-    )
+    function App() {
+      const { reset } = useQueryErrorResetBoundary()
+      return (
+        <ErrorBoundary
+          onReset={reset}
+          fallbackRender={() => <div>error boundary</div>}
+        >
+          <React.Suspense fallback="Loading...">
+            <Page />
+          </React.Suspense>
+        </ErrorBoundary>
+      )
+    }
 
-    await waitFor(() => rendered.getByText('loading'))
-    await waitFor(() => rendered.getByText('data: 1,2'))
+    const rendered = renderWithClient(queryClient, <App />)
 
-    expect(results).toEqual(['1', '2', 'loading'])
+    // render suspense fallback (Loading...)
+    await waitFor(() => rendered.getByText('Loading...'))
+    // resolve promise -> render Page (rendered)
+    await waitFor(() => rendered.getByText('rendered data success'))
+
+    // change promise result to error
+    succeed = false
+    // refetch
+    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+    // we are now in error state but still have data to show
+    await waitFor(() => rendered.getByText('rendered data error'))
+
+    consoleMock.mockRestore()
   })
+})
 
-  it('should allow to mix suspense with non-suspense', async () => {
+describe('useSuspenseQueries', () => {
+  const queryClient = createQueryClient()
+  it('should suspend all queries in parallel', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
-    const results: string[] = []
+    const results: Array<string> = []
 
     function Fallback() {
       results.push('loading')
@@ -1020,34 +794,29 @@ describe('useQueries with suspense', () => {
     }
 
     function Page() {
-      const result = useQueries({
+      const result = useSuspenseQueries({
         queries: [
           {
             queryKey: key1,
             queryFn: async () => {
               results.push('1')
-              await sleep(50)
+              await sleep(10)
               return '1'
             },
-            suspense: true,
           },
           {
             queryKey: key2,
             queryFn: async () => {
               results.push('2')
-              await sleep(200)
+              await sleep(20)
               return '2'
             },
-            staleTime: 2000,
-            suspense: false,
           },
         ],
       })
-
       return (
         <div>
           <h1>data: {result.map((it) => it.data ?? 'null').join(',')}</h1>
-          <h2>status: {result.map((it) => it.status).join(',')}</h2>
         </div>
       )
     }
@@ -1058,9 +827,8 @@ describe('useQueries with suspense', () => {
         <Page />
       </React.Suspense>,
     )
+
     await waitFor(() => rendered.getByText('loading'))
-    await waitFor(() => rendered.getByText('status: success,pending'))
-    await waitFor(() => rendered.getByText('data: 1,null'))
     await waitFor(() => rendered.getByText('data: 1,2'))
 
     expect(results).toEqual(['1', '2', 'loading'])
@@ -1069,8 +837,8 @@ describe('useQueries with suspense', () => {
   it("shouldn't unmount before all promises fetched", async () => {
     const key1 = queryKey()
     const key2 = queryKey()
-    const results: string[] = []
-    const refs: number[] = []
+    const results: Array<string> = []
+    const refs: Array<number> = []
 
     function Fallback() {
       results.push('loading')
@@ -1079,7 +847,7 @@ describe('useQueries with suspense', () => {
 
     function Page() {
       const ref = React.useRef(Math.random())
-      const result = useQueries({
+      const result = useSuspenseQueries({
         queries: [
           {
             queryKey: key1,
@@ -1089,7 +857,6 @@ describe('useQueries with suspense', () => {
               await sleep(10)
               return '1'
             },
-            suspense: true,
           },
           {
             queryKey: key2,
@@ -1099,7 +866,6 @@ describe('useQueries with suspense', () => {
               await sleep(20)
               return '2'
             },
-            suspense: true,
           },
         ],
       })
@@ -1121,62 +887,4 @@ describe('useQueries with suspense', () => {
     await waitFor(() => rendered.getByText('data: 1,2'))
     expect(refs[0]).toBe(refs[1])
   })
-
-  it('should suspend all queries in parallel - global configuration', async () => {
-    const queryClientSuspenseMode = createQueryClient({
-      defaultOptions: {
-        queries: {
-          suspense: true,
-        },
-      },
-    })
-    const key1 = queryKey()
-    const key2 = queryKey()
-    const results: string[] = []
-
-    function Fallback() {
-      results.push('loading')
-      return <div>loading</div>
-    }
-
-    function Page() {
-      const result = useQueries({
-        queries: [
-          {
-            queryKey: key1,
-            queryFn: async () => {
-              results.push('1')
-              await sleep(10)
-              return '1'
-            },
-          },
-          {
-            queryKey: key2,
-            queryFn: async () => {
-              results.push('2')
-              await sleep(20)
-              return '2'
-            },
-          },
-        ],
-      })
-      return (
-        <div>
-          <h1>data: {result.map((it) => it.data ?? 'null').join(',')}</h1>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(
-      queryClientSuspenseMode,
-      <React.Suspense fallback={<Fallback />}>
-        <Page />
-      </React.Suspense>,
-    )
-
-    await waitFor(() => rendered.getByText('loading'))
-    await waitFor(() => rendered.getByText('data: 1,2'))
-
-    expect(results).toEqual(['1', '2', 'loading'])
-  })
 })