@tanstack/react-query 4.15.1 → 4.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.15.1",
+  "version": "4.17.1",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -46,8 +46,8 @@
     "react-error-boundary": "^3.1.4"
   },
   "dependencies": {
-    "@tanstack/query-core": "4.15.1",
-    "use-sync-external-store": "^1.2.0"
+    "use-sync-external-store": "^1.2.0",
+    "@tanstack/query-core": "4.15.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

package/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,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 <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'
+            },
+          },
+          {
+            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'])
+  })
 })

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -1109,20 +1109,31 @@ describe('useInfiniteQuery', () => {
 
       states.push(state)
 
-      const { fetchNextPage } = state
+      return (
+        <div>
+          <div>page0: {state.data?.pages[0]}</div>
+          <div>page1: {state.data?.pages[1]}</div>
+          <button onClick={() => state.fetchNextPage({ pageParam: 5 })}>
+            Fetch next page
+          </button>
+        </div>
+      )
+    }
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          fetchNextPage({ pageParam: 5 })
-        }, 20)
-      }, [fetchNextPage])
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      return null
-    }
+    await waitFor(() => {
+      rendered.getByText('page0: 0')
+    })
 
-    renderWithClient(queryClient, <Page />)
+    fireEvent.click(rendered.getByRole('button', { name: 'Fetch next page' }))
 
-    await sleep(100)
+    await waitFor(() => {
+      rendered.getByText('page1: 5')
+    })
+
+    // make sure no additional renders are happening after fetching next page
+    await sleep(20)
 
     expect(states.length).toBe(4)
     expect(states[0]).toMatchObject({

package/src/__tests__/useQuery.test.tsx

@@ -505,20 +505,26 @@ describe('useQuery', () => {
 
       states.push(state)
 
-      const { refetch } = state
+      return (
+        <div>
+          <div>isSuccess: {state.isSuccess ? 'true' : 'false'}</div>
+          <button onClick={() => state.refetch()}>refetch</button>
+        </div>
+      )
+    }
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          refetch()
-        }, 10)
-      }, [refetch])
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      return null
-    }
+    await waitFor(() => {
+      rendered.getByText('isSuccess: false')
+    })
 
-    renderWithClient(queryClient, <Page />)
+    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+    await waitFor(() => {
+      rendered.getByText('isSuccess: true')
+    })
 
-    await sleep(50)
     expect(onSuccess).toHaveBeenCalledTimes(1)
     expect(onSuccess).toHaveBeenCalledWith('data')
   })
@@ -622,12 +628,16 @@ describe('useQuery', () => {
     function Page() {
       const state = useQuery(key, () => 'data', { onSettled })
       states.push(state)
-      return null
+
+      return <div>data: {state.data}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => {
+      rendered.getByText('data: data')
+    })
 
-    await sleep(10)
     expect(states.length).toBe(2)
     expect(onSettled).toHaveBeenCalledTimes(1)
     expect(onSettled).toHaveBeenCalledWith('data', null)
@@ -1062,12 +1072,15 @@ describe('useQuery', () => {
         },
       })
       states.push(state)
-      return null
+
+      return <div>{state.status}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('error')
+    })
 
     expect(mockLogger.error).toHaveBeenCalledWith(error)
     expect(states.length).toBe(2)
@@ -1175,7 +1188,13 @@ describe('useQuery', () => {
 
     renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      expect(renderCount).toBe(2)
+    })
+
+    // give it a bit more time to make sure no additional renders are triggered
+    await sleep(20)
+
     expect(renderCount).toBe(2)
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({ data: undefined })
@@ -2482,12 +2501,14 @@ describe('useQuery', () => {
     function Page() {
       const state = useQuery([key, variables], queryFn)
       states.push(state)
-      return null
+      return <div>{state.status}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(20)
+    await waitFor(() => {
+      rendered.getByText('success')
+    })
 
     expect(states[1]?.data).toEqual([key, variables])
   })
@@ -5461,13 +5482,15 @@ describe('useQuery', () => {
       onlineMock.mockReturnValue(true)
       window.dispatchEvent(new Event('online'))
 
-      await sleep(15)
-
-      expect(queryClient.getQueryState(key)).toMatchObject({
-        fetchStatus: 'idle',
-        status: 'success',
+      await waitFor(() => {
+        expect(queryClient.getQueryState(key)).toMatchObject({
+          fetchStatus: 'idle',
+          status: 'success',
+        })
       })
 
+      // give it a bit more time to make sure queryFn is not called again
+      await sleep(15)
       expect(count).toBe(1)
 
       onlineMock.mockRestore()