test({react,preact}-query/useSuspenseQueries): add test for suspending when the faster query already has data (#10210)

Author: sukvvon

packages/preact-query/src/__tests__/useSuspenseQueries.test.tsx

@@ -856,7 +856,7 @@ describe('useSuspenseQueries 2', () => {
     process.env.NODE_ENV = envCopy
   })
 
-  it('should only suspend queries that are pending when some queries already have data', async () => {
+  it('should only suspend queries that are pending when the slower query already has data', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
 
@@ -909,6 +909,59 @@ describe('useSuspenseQueries 2', () => {
     expect(rendered.getByText('data2: data2')).toBeInTheDocument()
   })
 
+  it('should only suspend queries that are pending when the faster query already has data', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    queryClient.setQueryData(key2, 'cached')
+
+    function Page() {
+      const [result1, result2] = useSuspenseQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: () => sleep(2000).then(() => 'data1'),
+          },
+          {
+            queryKey: key2,
+            queryFn: () => sleep(1000).then(() => 'data2'),
+          },
+        ],
+      })
+
+      return (
+        <div>
+          <div>data1: {result1.data}</div>
+          <div>data2: {result2.data}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <Suspense fallback={<div>loading</div>}>
+        <Page />
+      </Suspense>,
+    )
+
+    expect(rendered.getByText('loading')).toBeInTheDocument()
+
+    // key1 resolves: suspend lifts, key1 shows fresh data, key2 shows cached data
+    await vi.advanceTimersByTimeAsync(2000)
+
+    expect(rendered.getByText('data1: data1')).toBeInTheDocument()
+    expect(rendered.getByText('data2: cached')).toBeInTheDocument()
+
+    // key2 stale timer fires, triggering background refetch
+    await vi.advanceTimersByTimeAsync(1000)
+
+    // key2 background refetch completes: key2 updates to fresh data
+    await vi.advanceTimersByTimeAsync(1000)
+
+    expect(rendered.getByText('data1: data1')).toBeInTheDocument()
+    expect(rendered.getByText('data2: data2')).toBeInTheDocument()
+  })
+
   it('should not suspend and not refetch when all queries have fresh cached data', () => {
     const key1 = queryKey()
     const key2 = queryKey()

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

@@ -834,7 +834,7 @@ describe('useSuspenseQueries 2', () => {
     process.env.NODE_ENV = envCopy
   })
 
-  it('should only suspend queries that are pending when some queries already have data', async () => {
+  it('should only suspend queries that are pending when the slower query already has data', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
 
@@ -887,6 +887,59 @@ describe('useSuspenseQueries 2', () => {
     expect(rendered.getByText('data2: data2')).toBeInTheDocument()
   })
 
+  it('should only suspend queries that are pending when the faster query already has data', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    queryClient.setQueryData(key2, 'cached')
+
+    function Page() {
+      const [result1, result2] = useSuspenseQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: () => sleep(2000).then(() => 'data1'),
+          },
+          {
+            queryKey: key2,
+            queryFn: () => sleep(1000).then(() => 'data2'),
+          },
+        ],
+      })
+
+      return (
+        <div>
+          <div>data1: {result1.data}</div>
+          <div>data2: {result2.data}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <React.Suspense fallback={<div>loading</div>}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    expect(rendered.getByText('loading')).toBeInTheDocument()
+
+    // key1 resolves: suspend lifts, key1 shows fresh data, key2 shows cached data
+    await act(() => vi.advanceTimersByTimeAsync(2000))
+
+    expect(rendered.getByText('data1: data1')).toBeInTheDocument()
+    expect(rendered.getByText('data2: cached')).toBeInTheDocument()
+
+    // key2 stale timer fires, triggering background refetch
+    await act(() => vi.advanceTimersByTimeAsync(1000))
+
+    // key2 background refetch completes: key2 updates to fresh data
+    await act(() => vi.advanceTimersByTimeAsync(1000))
+
+    expect(rendered.getByText('data1: data1')).toBeInTheDocument()
+    expect(rendered.getByText('data2: data2')).toBeInTheDocument()
+  })
+
   it('should not suspend and not refetch when all queries have fresh cached data', () => {
     const key1 = queryKey()
     const key2 = queryKey()