fix: should be able to invalidate queries

Author: boschni

src/core/query.ts

@@ -34,6 +34,7 @@ export interface QueryState<TResult, TError> {
   isFetching: boolean
   isFetchingMore: IsFetchingMoreValue
   isInitialData: boolean
+  isInvalidated: boolean
   status: QueryStatus
   throwInErrorBoundary?: boolean
   updateCount: number
@@ -58,6 +59,7 @@ const enum ActionType {
   Fetch,
   Success,
   Error,
+  Invalidate,
 }
 
 interface SetDataOptions {
@@ -85,10 +87,15 @@ interface ErrorAction<TError> {
   error: TError
 }
 
+interface InvalidateAction {
+  type: ActionType.Invalidate
+}
+
 export type Action<TResult, TError> =
   | ErrorAction<TError>
   | FailedAction
   | FetchAction
+  | InvalidateAction
   | SuccessAction<TResult>
 
 // CLASS
@@ -236,6 +243,7 @@ export class Query<TResult, TError> {
 
   isStaleByTime(staleTime = 0): boolean {
     return (
+      this.state.isInvalidated ||
       this.state.status !== QueryStatus.Success ||
       this.state.updatedAt + staleTime <= Date.now()
     )
@@ -295,6 +303,12 @@ export class Query<TResult, TError> {
     }
   }
 
+  invalidate(): void {
+    if (!this.state.isInvalidated) {
+      this.dispatch({ type: ActionType.Invalidate })
+    }
+  }
+
   async refetch(
     options?: RefetchOptions,
     config?: ResolvedQueryConfig<TResult, TError>
@@ -610,6 +624,7 @@ function getDefaultState<TResult, TError>(
     isFetching: status === QueryStatus.Loading,
     isFetchingMore: false,
     isInitialData: true,
+    isInvalidated: false,
     status,
     updateCount: 0,
     updatedAt: Date.now(),
@@ -647,6 +662,7 @@ export function queryReducer<TResult, TError>(
         isFetching: false,
         isFetchingMore: false,
         isInitialData: false,
+        isInvalidated: false,
         status: QueryStatus.Success,
         updateCount: state.updateCount + 1,
         updatedAt: action.updatedAt ?? Date.now(),
@@ -662,6 +678,11 @@ export function queryReducer<TResult, TError>(
         throwInErrorBoundary: true,
         updateCount: state.updateCount + 1,
       }
+    case ActionType.Invalidate:
+      return {
+        ...state,
+        isInvalidated: true,
+      }
     default:
       return state
   }

src/core/queryCache.ts

@@ -3,8 +3,8 @@ import {
   deepIncludes,
   getQueryArgs,
   isDocumentVisible,
-  isPlainObject,
   isOnline,
+  isPlainObject,
   isServer,
 } from './utils'
 import { getResolvedQueryConfig } from './config'
@@ -35,9 +35,14 @@ interface PrefetchQueryOptions {
   throwOnError?: boolean
 }
 
-interface InvalidateQueriesOptions extends QueryPredicateOptions {
+interface RefetchQueriesOptions extends QueryPredicateOptions {
   refetchActive?: boolean
+  refetchFresh?: boolean
   refetchInactive?: boolean
+  refetchStale?: boolean
+}
+
+interface InvalidateQueriesOptions extends RefetchQueriesOptions {
   throwOnError?: boolean
 }
 
@@ -186,30 +191,60 @@ export class QueryCache {
     })
   }
 
-  async invalidateQueries(
+  /**
+   * @return Promise resolving to an array with the invalidated queries.
+   */
+  invalidateQueries(
     predicate?: QueryPredicate,
     options?: InvalidateQueriesOptions
-  ): Promise<void> {
-    const { refetchActive = true, refetchInactive = false, throwOnError } =
-      options || {}
+  ): Promise<Query<unknown, unknown>[]> {
+    const queries = this.getQueries(predicate, options)
 
-    try {
-      await Promise.all(
-        this.getQueries(predicate, options).map(query => {
-          const enabled = query.isEnabled()
-
-          if ((enabled && refetchActive) || (!enabled && refetchInactive)) {
-            return query.fetch()
-          }
-
-          return undefined
-        })
-      )
-    } catch (err) {
-      if (throwOnError) {
-        throw err
-      }
+    queries.forEach(query => {
+      query.invalidate()
+    })
+
+    let promise = this.refetchQueries(predicate, options)
+
+    if (!options?.throwOnError) {
+      promise = promise.catch(() => queries)
     }
+
+    return promise.then(() => queries)
+  }
+
+  /**
+   * @return Promise resolving to an array with the refetched queries.
+   */
+  refetchQueries(
+    predicate?: QueryPredicate,
+    options?: RefetchQueriesOptions
+  ): Promise<Query<unknown, unknown>[]> {
+    const {
+      refetchActive = true,
+      refetchFresh = true,
+      refetchInactive = false,
+      refetchStale = true,
+    } = options || {}
+
+    const queries: Query<unknown, unknown>[] = []
+    const promises: Promise<unknown>[] = []
+
+    this.getQueries(predicate, options).forEach(query => {
+      const stale = query.isStale()
+      const enabled = query.isEnabled()
+      if (
+        ((refetchActive && enabled) || (refetchInactive && !enabled)) &&
+        ((refetchStale && stale) || (refetchFresh && !stale))
+      ) {
+        queries.push(query)
+        promises.push(query.fetch())
+      }
+    })
+
+    return Promise.all(promises)
+      .then(() => queries)
+      .catch(() => queries)
   }
 
   resetErrorBoundaries(): void {

src/core/queryObserver.ts

@@ -306,8 +306,8 @@ export class QueryObserver<TResult, TError> {
     const { config } = this
     const { type } = action
 
-    // Update stale state on success or error
-    if (type === 2 || type === 3) {
+    // Update stale state on success, error or invalidation
+    if (type === 2 || type === 3 || type === 4) {
       this.isStale = this.currentQuery.isStaleByTime(config.staleTime)
     }
 
@@ -316,15 +316,23 @@ export class QueryObserver<TResult, TError> {
     this.updateResult()
     const currentResult = this.currentResult
 
-    // Trigger callbacks and timers on success or error
+    // Update timers on success, error or invalidation
+    if (type === 2 || type === 3 || type === 4) {
+      this.updateTimers()
+    }
+
+    // Trigger callbacks on success or error
     if (type === 2) {
       config.onSuccess?.(currentResult.data!)
       config.onSettled?.(currentResult.data!, null)
-      this.updateTimers()
     } else if (type === 3) {
       config.onError?.(currentResult.error!)
       config.onSettled?.(undefined, currentResult.error!)
-      this.updateTimers()
+    }
+
+    // Do not notify if the query was invalidated but the stale state did not changed
+    if (type === 4 && currentResult.isStale === prevResult.isStale) {
+      return
     }
 
     if (

src/react/tests/useQuery.test.tsx

@@ -487,6 +487,52 @@ describe('useQuery', () => {
     return null
   })
 
+  it('should update query stale state when invalidated with invalidateQueries', async () => {
+    const key = queryKey()
+    const states: QueryResult<string>[] = []
+
+    function Page() {
+      const state = useQuery(key, () => 'data', { staleTime: Infinity })
+
+      states.push(state)
+
+      React.useEffect(() => {
+        setTimeout(() => {
+          queryCache.invalidateQueries(key, {
+            refetchActive: false,
+            refetchInactive: false,
+          })
+        }, 10)
+      }, [])
+
+      return null
+    }
+
+    render(<Page />)
+
+    await waitForMs(100)
+
+    expect(states.length).toBe(3)
+    expect(states[0]).toMatchObject({
+      data: undefined,
+      isFetching: true,
+      isSuccess: false,
+      isStale: true,
+    })
+    expect(states[1]).toMatchObject({
+      data: 'data',
+      isFetching: false,
+      isSuccess: true,
+      isStale: false,
+    })
+    expect(states[2]).toMatchObject({
+      data: 'data',
+      isFetching: false,
+      isSuccess: true,
+      isStale: true,
+    })
+  })
+
   it('should update disabled query when updated with invalidateQueries', async () => {
     const key = queryKey()
     const states: QueryResult<number>[] = []
@@ -516,25 +562,27 @@ describe('useQuery', () => {
 
     render(<Page />)
 
-    await waitFor(() => expect(states.length).toBe(3))
+    await waitForMs(100)
 
-    expect(states).toMatchObject([
-      {
-        data: undefined,
-        isFetching: false,
-        isSuccess: false,
-      },
-      {
-        data: undefined,
-        isFetching: true,
-        isSuccess: false,
-      },
-      {
-        data: 1,
-        isFetching: false,
-        isSuccess: true,
-      },
-    ])
+    expect(states.length).toBe(3)
+    expect(states[0]).toMatchObject({
+      data: undefined,
+      isFetching: false,
+      isSuccess: false,
+      isStale: true,
+    })
+    expect(states[1]).toMatchObject({
+      data: undefined,
+      isFetching: true,
+      isSuccess: false,
+      isStale: true,
+    })
+    expect(states[2]).toMatchObject({
+      data: 1,
+      isFetching: false,
+      isSuccess: true,
+      isStale: true,
+    })
   })
 
   it('should keep the previous data when keepPreviousData is set', async () => {
@@ -910,13 +958,11 @@ describe('useQuery', () => {
 
     render(<Page />)
 
-    await waitFor(() =>
-      expect(states).toMatchObject([
-        { isStale: true },
-        { isStale: false },
-        { isStale: true },
-      ])
-    )
+    await waitForMs(100)
+
+    expect(states[0]).toMatchObject({ isStale: true })
+    expect(states[1]).toMatchObject({ isStale: false })
+    expect(states[2]).toMatchObject({ isStale: true })
   })
 
   it('should notify query cache when a query becomes stale', async () => {