@tanstack/react-query 5.59.14 → 5.59.16

package/src/__tests__/useSuspenseQueries.test.tsx

@@ -7,9 +7,10 @@ import {
   it,
   vi,
 } from 'vitest'
-import { act, render } from '@testing-library/react'
+import { act, fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { useSuspenseQueries } from '..'
+import { ErrorBoundary } from 'react-error-boundary'
+import { useSuspenseQueries, useSuspenseQuery } from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 import type { UseSuspenseQueryOptions } from '..'
 
@@ -183,3 +184,478 @@ describe('useSuspenseQueries', () => {
     expect(spy).toHaveBeenCalled()
   })
 })
+
+describe('useSuspenseQueries 2', () => {
+  it('should suspend all queries in parallel', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const results: Array<string> = []
+
+    function Fallback() {
+      results.push('loading')
+      return <div>loading</div>
+    }
+
+    function Page() {
+      const result = useSuspenseQueries({
+        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((item) => item.data ?? 'null').join(',')}</h1>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <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'])
+  })
+
+  it("shouldn't unmount before all promises fetched", async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const results: Array<string> = []
+    const refs: Array<number> = []
+
+    function Fallback() {
+      results.push('loading')
+      return <div>loading</div>
+    }
+
+    function Page() {
+      const ref = React.useRef(Math.random())
+      const result = useSuspenseQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: async () => {
+              refs.push(ref.current)
+              results.push('1')
+              await sleep(10)
+              return '1'
+            },
+          },
+          {
+            queryKey: key2,
+            queryFn: async () => {
+              refs.push(ref.current)
+              results.push('2')
+              await sleep(20)
+              return '2'
+            },
+          },
+        ],
+      })
+      return (
+        <div>
+          <h1>data: {result.map((item) => item.data ?? 'null').join(',')}</h1>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <React.Suspense fallback={<Fallback />}>
+        <Page />
+      </React.Suspense>,
+    )
+    await waitFor(() => rendered.getByText('loading'))
+    expect(refs.length).toBe(2)
+    await waitFor(() => rendered.getByText('data: 1,2'))
+    expect(refs[0]).toBe(refs[1])
+  })
+
+  // this addresses the following issue:
+  // https://github.com/TanStack/query/issues/6344
+  it('should suspend on offline when query changes, and data should not be undefined', async () => {
+    function Page() {
+      const [id, setId] = React.useState(0)
+
+      const { data } = useSuspenseQuery({
+        queryKey: [id],
+        queryFn: () => Promise.resolve(`Data ${id}`),
+      })
+
+      // defensive guard here
+      if (data === undefined) {
+        throw new Error('data cannot be undefined')
+      }
+
+      return (
+        <>
+          <div>{data}</div>
+          <button onClick={() => setId(id + 1)}>fetch</button>
+        </>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <React.Suspense fallback={<div>loading</div>}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('Data 0'))
+
+    // go offline
+    document.dispatchEvent(new CustomEvent('offline'))
+
+    fireEvent.click(rendered.getByText('fetch'))
+    await waitFor(() => rendered.getByText('Data 0'))
+
+    // go back online
+    document.dispatchEvent(new CustomEvent('online'))
+    fireEvent.click(rendered.getByText('fetch'))
+
+    // query should resume
+    await waitFor(() => rendered.getByText('Data 1'))
+  })
+
+  it('should throw error when queryKey changes and new query fails', async () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+    const key = queryKey()
+
+    function Page() {
+      const [fail, setFail] = React.useState(false)
+      const { data } = useSuspenseQuery({
+        queryKey: [key, fail],
+        queryFn: async () => {
+          await sleep(10)
+
+          if (fail) {
+            throw new Error('Suspense Error Bingo')
+          } else {
+            return 'data'
+          }
+        },
+        retry: 0,
+      })
+
+      return (
+        <div>
+          <button onClick={() => setFail(true)}>trigger fail</button>
+
+          <div>rendered: {String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <ErrorBoundary fallbackRender={() => <div>error boundary</div>}>
+        <React.Suspense fallback={'Loading...'}>
+          <Page />
+        </React.Suspense>
+      </ErrorBoundary>,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('rendered: data'))
+
+    fireEvent.click(rendered.getByText('trigger fail'))
+
+    await waitFor(() => rendered.getByText('error boundary'))
+
+    expect(consoleMock.mock.calls[0]?.[1]).toStrictEqual(
+      new Error('Suspense Error Bingo'),
+    )
+
+    consoleMock.mockRestore()
+  })
+
+  it('should keep previous data when wrapped in a transition', async () => {
+    const key = queryKey()
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+      const [isPending, startTransition] = React.useTransition()
+      const { data } = useSuspenseQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return 'data' + count
+        },
+      })
+
+      return (
+        <div>
+          <button onClick={() => startTransition(() => setCount(count + 1))}>
+            inc
+          </button>
+
+          <div>{isPending ? 'Pending...' : String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <React.Suspense fallback={'Loading...'}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('data0'))
+
+    fireEvent.click(rendered.getByText('inc'))
+
+    await waitFor(() => rendered.getByText('Pending...'))
+
+    await waitFor(() => rendered.getByText('data1'))
+  })
+
+  it('should not request old data inside transitions (issue #6486)', async () => {
+    const key = queryKey()
+    let queryFnCount = 0
+
+    function App() {
+      const [count, setCount] = React.useState(0)
+
+      return (
+        <div>
+          <button
+            onClick={() => React.startTransition(() => setCount(count + 1))}
+          >
+            inc
+          </button>
+          <React.Suspense fallback={'Loading...'}>
+            <Page count={count} />
+          </React.Suspense>
+        </div>
+      )
+    }
+
+    function Page({ count }: { count: number }) {
+      const { data } = useSuspenseQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          queryFnCount++
+          await sleep(10)
+          return 'data' + count
+        },
+      })
+
+      return (
+        <div>
+          <div>{String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+
+      <App />,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('data0'))
+
+    fireEvent.click(rendered.getByText('inc'))
+
+    await waitFor(() => rendered.getByText('data1'))
+
+    await sleep(20)
+
+    expect(queryFnCount).toBe(2)
+  })
+
+  it('should still suspense if queryClient has placeholderData config', async () => {
+    const key = queryKey()
+    const queryClientWithPlaceholder = createQueryClient({
+      defaultOptions: {
+        queries: {
+          placeholderData: (previousData: any) => previousData,
+        },
+      },
+    })
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+      const [isPending, startTransition] = React.useTransition()
+      const { data } = useSuspenseQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return 'data' + count
+        },
+      })
+
+      return (
+        <div>
+          <button onClick={() => startTransition(() => setCount(count + 1))}>
+            inc
+          </button>
+
+          <div>{isPending ? 'Pending...' : String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClientWithPlaceholder,
+      <React.Suspense fallback={'Loading...'}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('data0'))
+
+    fireEvent.click(rendered.getByText('inc'))
+
+    await waitFor(() => rendered.getByText('Pending...'))
+
+    await waitFor(() => rendered.getByText('data1'))
+  })
+
+  it('should show error boundary even with gcTime:0 (#7853)', async () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+    const key = queryKey()
+    let count = 0
+
+    function Page() {
+      useSuspenseQuery({
+        queryKey: key,
+        queryFn: async () => {
+          count++
+          console.log('queryFn')
+          throw new Error('Query failed')
+        },
+        gcTime: 0,
+        retry: false,
+      })
+
+      return null
+    }
+
+    function App() {
+      return (
+        <React.Suspense fallback="loading">
+          <ErrorBoundary
+            fallbackRender={() => {
+              return <div>There was an error!</div>
+            }}
+          >
+            <Page />
+          </ErrorBoundary>
+        </React.Suspense>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <App />)
+
+    await waitFor(() => rendered.getByText('There was an error!'))
+    expect(count).toBe(1)
+    consoleMock.mockRestore()
+  })
+
+  describe('gc (with fake timers)', () => {
+    beforeAll(() => {
+      vi.useFakeTimers()
+    })
+
+    afterAll(() => {
+      vi.useRealTimers()
+    })
+
+    it('should gc when unmounted while fetching with low gcTime (#8159)', async () => {
+      const key = queryKey()
+
+      function Page() {
+        return (
+          <React.Suspense fallback="loading">
+            <Component />
+          </React.Suspense>
+        )
+      }
+
+      function Component() {
+        const { data } = useSuspenseQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(3000)
+            return 'data'
+          },
+          gcTime: 1000,
+        })
+
+        return <div>{data}</div>
+      }
+
+      function Page2() {
+        return <div>page2</div>
+      }
+
+      function App() {
+        const [show, setShow] = React.useState(true)
+        return (
+          <div>
+            {show ? <Page /> : <Page2 />}
+            <button onClick={() => setShow(false)}>hide</button>
+          </div>
+        )
+      }
+
+      const rendered = renderWithClient(queryClient, <App />)
+
+      await act(() => vi.advanceTimersByTimeAsync(200))
+
+      rendered.getByText('loading')
+
+      // unmount while still fetching
+      fireEvent.click(rendered.getByText('hide'))
+
+      await act(() => vi.advanceTimersByTimeAsync(800))
+
+      rendered.getByText('page2')
+
+      // wait for query to be resolved
+      await act(() => vi.advanceTimersByTimeAsync(2000))
+
+      expect(queryClient.getQueryData(key)).toBe('data')
+
+      // wait for gc
+      await act(() => vi.advanceTimersByTimeAsync(1000))
+
+      expect(queryClient.getQueryData(key)).toBe(undefined)
+    })
+  })
+})

package/src/__tests__/useSuspenseQuery.test-d.tsx

@@ -0,0 +1,71 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { skipToken } from '@tanstack/query-core'
+import { useSuspenseQuery } from '../useSuspenseQuery'
+
+describe('useSuspenseQuery', () => {
+  it('should always have data defined', () => {
+    const { data } = useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    expectTypeOf(data).toEqualTypeOf<number>()
+  })
+
+  it('should not have pending status', () => {
+    const { status } = useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    expectTypeOf(status).toEqualTypeOf<'error' | 'success'>()
+  })
+
+  it('should not allow skipToken in queryFn', () => {
+    useSuspenseQuery({
+      queryKey: ['key'],
+      // @ts-expect-error
+      queryFn: skipToken,
+    })
+
+    useSuspenseQuery({
+      queryKey: ['key'],
+      // @ts-expect-error
+      queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+    })
+  })
+
+  it('should not allow placeholderData, enabled or throwOnError props', () => {
+    useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      // @ts-expect-error TS2345
+      placeholderData: 5,
+      enabled: true,
+    })
+
+    useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      // @ts-expect-error TS2345
+      enabled: true,
+    })
+
+    useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      // @ts-expect-error TS2345
+      throwOnError: true,
+    })
+  })
+
+  it('should not return isPlaceholderData', () => {
+    const query = useSuspenseQuery({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    })
+
+    // @ts-expect-error TS2339
+    query.isPlaceholderData
+  })
+})