feat: add isRefetching flag (TanStack#2469)

Author: TkDodo

docs/src/pages/reference/useQuery.md

@@ -20,6 +20,7 @@ const {
   isPlaceholderData,
   isPreviousData,
   isRefetchError,
+  isRefetching,
   isStale,
   isSuccess,
   refetch,
@@ -220,6 +221,9 @@ const result = useQuery({
 - `isFetching: boolean`
   - Is `true` whenever a request is in-flight, which includes initial `loading` as well as background refetches.
   - Will be `true` if the query is currently fetching, including background fetching.
+- `isRefetching: boolean`
+  - Is `true` whenever a background refetch is in-flight, which _does not_ include initial `loading`
+  - Is the same as `isFetching && !isLoading`
 - `failureCount: number`
   - The failure count for the query.
   - Incremented every time the query fails.

src/core/queryObserver.ts

@@ -557,6 +557,7 @@ export class QueryObserver<
         state.dataUpdateCount > queryInitialState.dataUpdateCount ||
         state.errorUpdateCount > queryInitialState.errorUpdateCount,
       isFetching,
+      isRefetching: isFetching && status !== 'loading',
       isLoadingError: status === 'error' && state.dataUpdatedAt === 0,
       isPlaceholderData,
       isPreviousData,

src/core/types.ts

@@ -300,6 +300,7 @@ export interface QueryObserverBaseResult<TData = unknown, TError = unknown> {
   isPlaceholderData: boolean
   isPreviousData: boolean
   isRefetchError: boolean
+  isRefetching: boolean
   isStale: boolean
   isSuccess: boolean
   refetch: <TPageData>(

src/react/tests/useInfiniteQuery.test.tsx

@@ -87,6 +87,7 @@ describe('useInfiniteQuery', () => {
       isPlaceholderData: false,
       isPreviousData: false,
       isRefetchError: false,
+      isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
@@ -116,6 +117,7 @@ describe('useInfiniteQuery', () => {
       isPlaceholderData: false,
       isPreviousData: false,
       isRefetchError: false,
+      isRefetching: false,
       isStale: true,
       isSuccess: true,
       refetch: expect.any(Function),

src/react/tests/useQuery.test.tsx

@@ -179,6 +179,7 @@ describe('useQuery', () => {
       isPlaceholderData: false,
       isPreviousData: false,
       isRefetchError: false,
+      isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
@@ -202,6 +203,7 @@ describe('useQuery', () => {
       isPlaceholderData: false,
       isPreviousData: false,
       isRefetchError: false,
+      isRefetching: false,
       isStale: true,
       isSuccess: true,
       refetch: expect.any(Function),
@@ -255,6 +257,7 @@ describe('useQuery', () => {
       isPlaceholderData: false,
       isPreviousData: false,
       isRefetchError: false,
+      isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
@@ -278,6 +281,7 @@ describe('useQuery', () => {
       isPlaceholderData: false,
       isPreviousData: false,
       isRefetchError: false,
+      isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
@@ -301,6 +305,7 @@ describe('useQuery', () => {
       isPlaceholderData: false,
       isPreviousData: false,
       isRefetchError: false,
+      isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
@@ -820,6 +825,7 @@ describe('useQuery', () => {
           'data',
           'isFetching',
           'isLoading',
+          'isRefetching',
           'isSuccess',
           'status',
         ],
@@ -1156,24 +1162,28 @@ describe('useQuery', () => {
     expect(states[0]).toMatchObject({
       data: undefined,
       isFetching: true,
+      isRefetching: false,
       isSuccess: false,
       isStale: true,
     })
     expect(states[1]).toMatchObject({
       data: 1,
       isFetching: false,
+      isRefetching: false,
       isSuccess: true,
       isStale: false,
     })
     expect(states[2]).toMatchObject({
       data: 1,
       isFetching: true,
+      isRefetching: true,
       isSuccess: true,
       isStale: true,
     })
     expect(states[3]).toMatchObject({
       data: 2,
       isFetching: false,
+      isRefetching: false,
       isSuccess: true,
       isStale: false,
     })