@tanstack/react-query 4.14.3 → 4.14.6

package/package.json

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

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -516,24 +516,28 @@ describe('useInfiniteQuery', () => {
       data: undefined,
       isFetching: true,
       isFetchingNextPage: false,
+      isRefetching: false,
     })
     // Initial fetch done
     expect(states[1]).toMatchObject({
       data: { pages: [10] },
       isFetching: false,
       isFetchingNextPage: false,
+      isRefetching: false,
     })
     // Fetch next page
     expect(states[2]).toMatchObject({
       data: { pages: [10] },
       isFetching: true,
       isFetchingNextPage: true,
+      isRefetching: false,
     })
     // Fetch next page done
     expect(states[3]).toMatchObject({
       data: { pages: [10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
+      isRefetching: false,
     })
     // Fetch previous page
     expect(states[4]).toMatchObject({
@@ -541,6 +545,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: true,
+      isRefetching: false,
     })
     // Fetch previous page done
     expect(states[5]).toMatchObject({
@@ -548,6 +553,7 @@ describe('useInfiniteQuery', () => {
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
     // Refetch
     expect(states[6]).toMatchObject({
@@ -555,6 +561,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: true,
     })
     // Refetch done
     expect(states[7]).toMatchObject({
@@ -562,6 +569,7 @@ describe('useInfiniteQuery', () => {
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
   })
 
@@ -618,24 +626,28 @@ describe('useInfiniteQuery', () => {
       data: undefined,
       isFetching: true,
       isFetchingNextPage: false,
+      isRefetching: false,
     })
     // Initial fetch done
     expect(states[1]).toMatchObject({
       data: { pages: [10] },
       isFetching: false,
       isFetchingNextPage: false,
+      isRefetching: false,
     })
     // Fetch next page
     expect(states[2]).toMatchObject({
       data: { pages: [10] },
       isFetching: true,
       isFetchingNextPage: true,
+      isRefetching: false,
     })
     // Fetch next page done
     expect(states[3]).toMatchObject({
       data: { pages: [10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
+      isRefetching: false,
     })
     // Fetch previous page
     expect(states[4]).toMatchObject({
@@ -643,6 +655,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: true,
+      isRefetching: false,
     })
     // Fetch previous page done
     expect(states[5]).toMatchObject({
@@ -650,6 +663,7 @@ describe('useInfiniteQuery', () => {
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
     // Refetch
     expect(states[6]).toMatchObject({
@@ -657,6 +671,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: true,
     })
     // Refetch done
     expect(states[7]).toMatchObject({
@@ -664,6 +679,7 @@ describe('useInfiniteQuery', () => {
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
   })
 

package/src/__tests__/useQuery.test.tsx

@@ -1022,24 +1022,32 @@ describe('useQuery', () => {
 
       states.push(state)
 
-      const { refetch } = state
+      return (
+        <div>
+          <div>{state.data}</div>
+          <button onClick={() => state.refetch()}>refetch</button>
+        </div>
+      )
+    }
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          refetch()
-        }, 5)
-      }, [refetch])
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      return null
-    }
+    await waitFor(() => {
+      rendered.getByText('test')
+    })
 
-    renderWithClient(queryClient, <Page />)
+    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('test')
+    })
 
-    expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({ data: undefined })
     expect(states[1]).toMatchObject({ data: 'test' })
+
+    // make sure no additional renders happen
+    await sleep(50)
+    expect(states.length).toBe(2)
   })
 
   it('should throw an error when a selector throws', async () => {
@@ -1602,18 +1610,21 @@ describe('useQuery', () => {
 
       states.push(state)
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          setCount(1)
-        }, 20)
-      }, [])
-
-      return null
+      return (
+        <div>
+          <div>data: {state.data}</div>
+          <button onClick={() => setCount(1)}>setCount</button>
+        </div>
+      )
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await waitFor(() => expect(states.length).toBe(5))
+    await waitFor(() => rendered.getByText('data: 0'))
+
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+
+    await waitFor(() => rendered.getByText('data: 1'))
 
     // Initial
     expect(states[0]).toMatchObject({
@@ -1636,15 +1647,8 @@ describe('useQuery', () => {
       isSuccess: true,
       isPreviousData: true,
     })
-    // Hook state update
-    expect(states[3]).toMatchObject({
-      data: 0,
-      isFetching: true,
-      isSuccess: true,
-      isPreviousData: true,
-    })
     // New data
-    expect(states[4]).toMatchObject({
+    expect(states[3]).toMatchObject({
       data: 1,
       isFetching: false,
       isSuccess: true,
@@ -2202,38 +2206,6 @@ describe('useQuery', () => {
     expect(states[2]).toMatchObject({ isStale: true })
   })
 
-  it('should notify query cache when a query becomes stale', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const fn = jest.fn()
-
-    const unsubscribe = queryCache.subscribe(fn)
-
-    function Page() {
-      const state = useQuery(key, () => 'test', {
-        staleTime: 10,
-      })
-      states.push(state)
-      return null
-    }
-
-    renderWithClient(queryClient, <Page />)
-
-    await sleep(20)
-    unsubscribe()
-
-    // 1. Query added -> loading
-    // 2. Observer result updated -> loading
-    // 3. Observer added
-    // 4. Query updated -> success
-    // 5. Observer result updated -> success
-    // 6. Query updated -> stale
-    // 7. Observer options updated
-    // 8. Observer result updated -> stale
-    // 9. Observer options updated
-    expect(fn).toHaveBeenCalledTimes(9)
-  })
-
   it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
@@ -3821,18 +3793,35 @@ describe('useQuery', () => {
 
       results.push(result)
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          setShouldFetch(false)
-        }, 5)
-      }, [])
-
-      return null
+      return (
+        <div>
+          <div>{result.data}</div>
+          <div>{shouldFetch ? 'enabled' : 'disabled'}</div>
+          <button
+            onClick={() => {
+              setShouldFetch(false)
+            }}
+          >
+            enable
+          </button>
+        </div>
+      )
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => {
+      rendered.getByText('fetched data')
+      rendered.getByText('enabled')
+    })
+
+    fireEvent.click(rendered.getByRole('button', { name: /enable/i }))
+
+    await waitFor(() => {
+      rendered.getByText('fetched data')
+      rendered.getByText('disabled')
+    })
 
-    await sleep(50)
     expect(results.length).toBe(3)
     expect(results[0]).toMatchObject({ data: 'initial', isStale: true })
     expect(results[1]).toMatchObject({ data: 'fetched data', isStale: true })