@tanstack/react-query 4.14.1 → 4.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.14.1",
+  "version": "4.14.5",
   "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.1",
+    "@tanstack/query-core": "4.14.5",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -2,7 +2,6 @@ import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 
 import {
-  Blink,
   createQueryClient,
   queryKey,
   renderWithClient,
@@ -517,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({
@@ -542,6 +545,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: true,
+      isRefetching: false,
     })
     // Fetch previous page done
     expect(states[5]).toMatchObject({
@@ -549,6 +553,7 @@ describe('useInfiniteQuery', () => {
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
     // Refetch
     expect(states[6]).toMatchObject({
@@ -556,6 +561,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: true,
     })
     // Refetch done
     expect(states[7]).toMatchObject({
@@ -563,6 +569,7 @@ describe('useInfiniteQuery', () => {
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
   })
 
@@ -619,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({
@@ -644,6 +655,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: true,
+      isRefetching: false,
     })
     // Fetch previous page done
     expect(states[5]).toMatchObject({
@@ -651,6 +663,7 @@ describe('useInfiniteQuery', () => {
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
     // Refetch
     expect(states[6]).toMatchObject({
@@ -658,6 +671,7 @@ describe('useInfiniteQuery', () => {
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: true,
     })
     // Refetch done
     expect(states[7]).toMatchObject({
@@ -665,6 +679,7 @@ describe('useInfiniteQuery', () => {
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
   })
 
@@ -1725,13 +1740,13 @@ describe('useInfiniteQuery', () => {
       const promise = new Promise<string>((resolve, reject) => {
         cancelFn = jest.fn(() => reject('Cancelled'))
         signal?.addEventListener('abort', cancelFn)
-        sleep(20).then(() => resolve('OK'))
+        sleep(1000).then(() => resolve('OK'))
       })
 
       return promise
     }
 
-    function Page() {
+    function Inner() {
       const state = useInfiniteQuery(key, queryFn)
       return (
         <div>
@@ -1740,14 +1755,25 @@ describe('useInfiniteQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(
-      queryClient,
-      <Blink duration={5}>
-        <Page />
-      </Blink>,
-    )
+    function Page() {
+      const [isVisible, setIsVisible] = React.useState(true)
+
+      return (
+        <>
+          <button onClick={() => setIsVisible(false)}>hide</button>
+          {isVisible && <Inner />}
+          <div>{isVisible ? 'visible' : 'hidden'}</div>
+        </>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('visible'))
+
+    fireEvent.click(rendered.getByRole('button', { name: 'hide' }))
 
-    await waitFor(() => rendered.getByText('off'))
+    await waitFor(() => rendered.getByText('hidden'))
 
     expect(cancelFn).toHaveBeenCalled()
   })

package/src/__tests__/useQuery.test.tsx

@@ -969,12 +969,15 @@ describe('useQuery', () => {
         select: (data) => data.name,
       })
       states.push(state)
-      return null
+
+      return <div>{state.data}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('test')
+    })
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({ data: undefined })
@@ -992,12 +995,15 @@ describe('useQuery', () => {
         select: (data) => data.name,
       })
       states.push(state)
-      return null
+
+      return <div>{state.data}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('test')
+    })
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({ data: undefined })
@@ -1016,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 () => {
@@ -1596,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(() => rendered.getByText('data: 0'))
 
-    await waitFor(() => expect(states.length).toBe(5))
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+
+    await waitFor(() => rendered.getByText('data: 1'))
 
     // Initial
     expect(states[0]).toMatchObject({
@@ -1630,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,
@@ -2196,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>[] = []
@@ -3815,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 })