feat: revert to previous state on cancellation

Author: boschni

src/core/query.ts

@@ -1,4 +1,5 @@
 import {
+  CancelOptions,
   CancelledError,
   Updater,
   defaultRetryDelay,
@@ -116,7 +117,7 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
   private cache: QueryCache
   private promise?: Promise<TData>
   private gcTimeout?: number
-  private cancelFetch?: (silent?: boolean) => void
+  private cancelFetch?: (options?: CancelOptions) => void
   private continueFetch?: () => void
   private isTransportCancelable?: boolean
   private observers: QueryObserver<any, any, any, any>[]
@@ -175,9 +176,9 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     }, this.cacheTime)
   }
 
-  cancel(silent?: boolean): Promise<void> {
+  cancel(options?: CancelOptions): Promise<void> {
     const promise: Promise<any> = this.promise || Promise.resolve()
-    this.cancelFetch?.(silent)
+    this.cancelFetch?.(options)
     return promise.then(noop).catch(noop)
   }
 
@@ -338,7 +339,7 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     if (this.state.isFetching)
       if (fetchOptions?.fetchMore && this.state.updatedAt) {
         // Silently cancel current fetch if the user wants to fetch more
-        this.cancel(true)
+        this.cancel({ silent: true })
       } else if (this.promise) {
         // Return current promise if we are already fetching
         return this.promise
@@ -737,9 +738,22 @@ export function queryReducer<TData, TError>(
         updatedAt: action.updatedAt ?? Date.now(),
       }
     case 'error':
+      const error = action.error as unknown
+
+      if (isCancelledError(error) && error.revert) {
+        return {
+          ...state,
+          failureCount: 0,
+          isFetching: false,
+          isFetchingNextPage: false,
+          isFetchingPreviousPage: false,
+          status: state.error ? 'error' : state.updatedAt ? 'success' : 'idle',
+        }
+      }
+
       return {
         ...state,
-        error: action.error,
+        error: error as TError,
         errorUpdateCount: state.errorUpdateCount + 1,
         failureCount: state.failureCount + 1,
         isFetching: false,

src/core/queryClient.ts

@@ -1,4 +1,5 @@
 import {
+  CancelOptions,
   QueryFilters,
   Updater,
   isDocumentVisible,
@@ -128,16 +129,29 @@ export class QueryClient {
     })
   }
 
-  cancelQueries(filters?: QueryFilters): Promise<void>
-  cancelQueries(queryKey?: QueryKey, filters?: QueryFilters): Promise<void>
+  cancelQueries(filters?: QueryFilters, options?: CancelOptions): Promise<void>
+  cancelQueries(
+    queryKey?: QueryKey,
+    filters?: QueryFilters,
+    options?: CancelOptions
+  ): Promise<void>
   cancelQueries(
     arg1?: QueryKey | QueryFilters,
-    arg2?: QueryFilters
+    arg2?: QueryFilters | CancelOptions,
+    arg3?: CancelOptions
   ): Promise<void> {
-    const promises = notifyManager.batch(() =>
-      this.cache.findAll(arg1, arg2).map(query => query.cancel())
-    )
-    return Promise.all(promises).then(noop)
+    const [filters, options] = parseFilterArgs(arg1, arg2, arg3)
+    const cancelOptions = options || {}
+
+    if (typeof cancelOptions.revert === 'undefined') {
+      cancelOptions.revert = true
+    }
+
+    notifyManager.batch(() => {
+      this.cache.findAll(filters).map(query => query.cancel(cancelOptions))
+    })
+
+    return Promise.resolve().then(noop)
   }
 
   invalidateQueries(

src/core/tests/queryCache.test.tsx

@@ -671,6 +671,57 @@ describe('queryCache', () => {
     consoleMock.mockRestore()
   })
 
+  test('cancelQueries should revert queries to their previous state', async () => {
+    const consoleMock = mockConsoleError()
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const key3 = queryKey()
+    const testCache = new QueryCache()
+    const testClient = new QueryClient({ cache: testCache })
+    await testClient.fetchQueryData(key1, async () => {
+      return 'data'
+    })
+    try {
+      await testClient.fetchQueryData(key2, async () => {
+        return Promise.reject('err')
+      })
+    } catch {}
+    testClient.fetchQueryData(key1, async () => {
+      await sleep(1000)
+      return 'data2'
+    })
+    try {
+      testClient.fetchQueryData(key2, async () => {
+        await sleep(1000)
+        return Promise.reject('err2')
+      })
+    } catch {}
+    testClient.fetchQueryData(key3, async () => {
+      await sleep(1000)
+      return 'data3'
+    })
+    await sleep(10)
+    await testClient.cancelQueries()
+    const state1 = testClient.getQueryState(key1)
+    const state2 = testClient.getQueryState(key2)
+    const state3 = testClient.getQueryState(key3)
+    testCache.clear()
+    expect(state1).toMatchObject({
+      data: 'data',
+      status: 'success',
+    })
+    expect(state2).toMatchObject({
+      data: undefined,
+      error: 'err',
+      status: 'error',
+    })
+    expect(state3).toMatchObject({
+      data: undefined,
+      status: 'idle',
+    })
+    consoleMock.mockRestore()
+  })
+
   test('refetchQueries should refetch all queries when no arguments are given', async () => {
     const key1 = queryKey()
     const key2 = queryKey()

src/core/utils.ts

@@ -54,10 +54,17 @@ interface Cancelable {
   cancel(): void
 }
 
+export interface CancelOptions {
+  revert?: boolean
+  silent?: boolean
+}
+
 export class CancelledError {
+  revert?: boolean
   silent?: boolean
-  constructor(silent?: boolean) {
-    this.silent = silent
+  constructor(options?: CancelOptions) {
+    this.revert = options?.revert
+    this.silent = options?.silent
   }
 }