Make isRefetching false when fetching next/previous page in an infinite query

docs/reference/useInfiniteQuery.md

@@ -23,7 +23,7 @@ const {
 
 **Options**
 
-The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../reference/useQuery) with the addition of the following:
+The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../reference/useQuery) with the addition of the following and a small difference in `isRefetching`:
 
 - `queryFn: (context: QueryFunctionContext) => Promise<TData>`
   - **Required, but only if no default query function has been defined** [`defaultQueryFn`](../guides/default-query-function)
@@ -39,6 +39,9 @@ The options for `useInfiniteQuery` are identical to the [`useQuery` hook](../ref
   - When new data is received for this query, this function receives both the first page of the infinite list of data and the full array of all pages.
   - It should return a **single variable** that will be passed as the last optional parameter to your query function.
   - Return `undefined` to indicate there is no previous page available.
+- `isRefetching: boolean`
+  - Is `true` whenever a background refetch is in-flight, which _does not_ include initial `loading` or fetching of next or previous page
+  - Is the same as `isFetching && !isLoading && !isFetchingNextPage && !isFetchingPreviousPage`
 
 **Returns**
 

packages/query-core/src/infiniteQueryObserver.ts

@@ -139,18 +139,25 @@ export class InfiniteQueryObserver<
   ): InfiniteQueryObserverResult<TData, TError> {
     const { state } = query
     const result = super.createResult(query, options)
+
+    const { isFetching, isRefetching } = result
+
+    const isFetchingNextPage =
+      isFetching && state.fetchMeta?.fetchMore?.direction === 'forward'
+
+    const isFetchingPreviousPage =
+      isFetching && state.fetchMeta?.fetchMore?.direction === 'backward'
+
     return {
       ...result,
       fetchNextPage: this.fetchNextPage,
       fetchPreviousPage: this.fetchPreviousPage,
       hasNextPage: hasNextPage(options, state.data?.pages),
       hasPreviousPage: hasPreviousPage(options, state.data?.pages),
-      isFetchingNextPage:
-        state.fetchStatus === 'fetching' &&
-        state.fetchMeta?.fetchMore?.direction === 'forward',
-      isFetchingPreviousPage:
-        state.fetchStatus === 'fetching' &&
-        state.fetchMeta?.fetchMore?.direction === 'backward',
+      isFetchingNextPage,
+      isFetchingPreviousPage,
+      isRefetching:
+        isRefetching && !isFetchingNextPage && !isFetchingPreviousPage,
     }
   }
 }

packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

@@ -516,52 +516,60 @@ 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({
       data: { pages: [10, 11] },
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: true,
+      isRefetching: false,
     })
     // Fetch previous page done
     expect(states[5]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
     // Refetch
     expect(states[6]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: true,
     })
     // Refetch done
     expect(states[7]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
   })
 
@@ -618,52 +626,60 @@ 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({
       data: { pages: [10, 11] },
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: true,
+      isRefetching: false,
     })
     // Fetch previous page done
     expect(states[5]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
     // Refetch
     expect(states[6]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: true,
     })
     // Refetch done
     expect(states[7]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
   })
 

packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

@@ -555,52 +555,60 @@ 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({
       data: { pages: [10, 11] },
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: true,
+      isRefetching: false,
     })
     // Fetch previous page done
     expect(states[5]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
     // Refetch
     expect(states[6]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: true,
     })
     // Refetch done
     expect(states[7]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
   })
 
@@ -661,52 +669,60 @@ 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({
       data: { pages: [10, 11] },
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: true,
+      isRefetching: false,
     })
     // Fetch previous page done
     expect(states[5]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
     // Refetch
     expect(states[6]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: true,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: true,
     })
     // Refetch done
     expect(states[7]).toMatchObject({
       data: { pages: [9, 10, 11] },
       isFetching: false,
       isFetchingNextPage: false,
       isFetchingPreviousPage: false,
+      isRefetching: false,
     })
   })