diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx
index 3b27c6c90d..4216ac50d9 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', () => {
,
)
+
await waitFor(() => rendered.getByText('loading'))
await waitFor(() => rendered.getByText('data: 1,2'))
@@ -1121,4 +1121,118 @@ 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
loading
+ }
+
+ 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 (
+
+
data: {result.map((it) => it.data ?? 'null').join(',')}
+
+ )
+ }
+
+ const rendered = renderWithClient(
+ queryClient,
+ }>
+
+ ,
+ )
+ 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 loading
+ }
+
+ 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 (
+
+
data: {result.map((it) => it.data ?? 'null').join(',')}
+
+ )
+ }
+
+ const rendered = renderWithClient(
+ queryClientSuspenseMode,
+ }>
+
+ ,
+ )
+
+ await waitFor(() => rendered.getByText('loading'))
+ await waitFor(() => rendered.getByText('data: 1,2'))
+
+ expect(results).toEqual(['1', '2', 'loading'])
+ })
})