@tanstack/react-query 4.16.1 → 4.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.16.1",
+  "version": "4.18.0",
   "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.18.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

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()