From ba6c37c4927e097762da89e4a451756bab5df35d Mon Sep 17 00:00:00 2001
From: jaewon-yoon <jaewon.yoon@navercorp.com>
Date: Sun, 13 Nov 2022 13:48:10 +0900
Subject: [PATCH 1/2] test: add useQueries with suspense tests

shouldn't unmount before all promises fetched
should suspend all queries in parallel - global configuration
---
 .../src/__tests__/suspense.test.tsx           | 122 +++++++++++++++++-
 1 file changed, 119 insertions(+), 3 deletions(-)

diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx
index 3b27c6c90d..be417e39d0 100644
--- a/packages/react-query/src/__tests__/suspense.test.tsx
+++ b/packages/react-query/src/__tests__/suspense.test.tsx
@@ -1,8 +1,6 @@
 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 { ErrorBoundary } from 'react-error-boundary'
 import type { UseInfiniteQueryResult, UseQueryResult } from '..'
 import {
   QueryCache,
@@ -12,6 +10,7 @@ import {
   useQuery,
   useQueryErrorResetBoundary,
 } from '..'
+import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 
 describe("useQuery's in Suspense mode", () => {
   const queryCache = new QueryCache()
@@ -1061,6 +1060,7 @@ describe('useQueries with suspense', () => {
         <Page />
       </React.Suspense>,
     )
+
     await waitFor(() => rendered.getByText('loading'))
     await waitFor(() => rendered.getByText('data: 1,2'))
 
@@ -1121,4 +1121,120 @@ describe('useQueries with suspense', () => {
 
     expect(results).toEqual(['1', '2', 'loading'])
   })
+
+  it("shouldn't unmount before all promises fetched", async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const results: string[] = []
+    const refs: number[] = []
+
+    function Fallback() {
+      results.push('loading')
+      return <div>loading</div>
+    }
+
+    function Page() {
+      const ref = React.useRef(Math.random())
+      const result = useQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: async () => {
+              refs.push(ref.current)
+              results.push('1')
+              await sleep(10)
+              return '1'
+            },
+            suspense: true,
+          },
+          {
+            queryKey: key2,
+            queryFn: async () => {
+              refs.push(ref.current)
+              results.push('2')
+              await sleep(20)
+              return '2'
+            },
+            suspense: true,
+          },
+        ],
+      })
+      return (
+        <div>
+          <h1>data: {result.map((it) => it.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])
+  })
+
+  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'
+            },
+            suspense: true,
+          },
+          {
+            queryKey: key2,
+            queryFn: async () => {
+              results.push('2')
+              await sleep(20)
+              return '2'
+            },
+            suspense: false,
+          },
+        ],
+      })
+      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'])
+  })
 })

From a483788fa5f1b8ffc0701a270c9792c209c06121 Mon Sep 17 00:00:00 2001
From: jaewon-yoon <jaewon.yoon@navercorp.com>
Date: Sun, 13 Nov 2022 18:12:57 +0900
Subject: [PATCH 2/2] fix should suspend all queries in parallel - global
 configuration - remove query suspense option

---
 packages/react-query/src/__tests__/suspense.test.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx
index be417e39d0..4216ac50d9 100644
--- a/packages/react-query/src/__tests__/suspense.test.tsx
+++ b/packages/react-query/src/__tests__/suspense.test.tsx
@@ -1205,7 +1205,6 @@ describe('useQueries with suspense', () => {
               await sleep(10)
               return '1'
             },
-            suspense: true,
           },
           {
             queryKey: key2,
@@ -1214,7 +1213,6 @@ describe('useQueries with suspense', () => {
               await sleep(20)
               return '2'
             },
-            suspense: false,
           },
         ],
       })