feat(queryClient): respect cancelRefetch flag (#2798)

Author: TkDodo

docs/src/pages/reference/QueryClient.md

@@ -276,7 +276,7 @@ await queryClient.invalidateQueries('posts', {
   exact,
   refetchActive: true,
   refetchInactive: false
-}, { throwOnError })
+}, { throwOnError, cancelRefetch })
 ```
 
 **Options**
@@ -292,9 +292,11 @@ await queryClient.invalidateQueries('posts', {
   - `refetchPage: (page: TData, index: number, allPages: TData[]) => boolean`
     - Only for [Infinite Queries](../guides/infinite-queries#refetchpage)
     - Use this function to specify which pages should be refetched
-- `refetchOptions?: RefetchOptions`:
+- `options?: InvalidateOptions`:
   - `throwOnError?: boolean`
     - When set to `true`, this method will throw if any of the query refetch tasks fail.
+  - cancelRefetch?: boolean
+    - When set to `true`, then the current request will be cancelled before a new request is made
 
 ## `queryClient.refetchQueries`
 
@@ -323,9 +325,11 @@ await queryClient.refetchQueries(['posts', 1], { active: true, exact: true })
   - `refetchPage: (page: TData, index: number, allPages: TData[]) => boolean`
     - Only for [Infinite Queries](../guides/infinite-queries#refetchpage)
     - Use this function to specify which pages should be refetched
-- `refetchOptions?: RefetchOptions`:
+- `options?: RefetchOptions`:
   - `throwOnError?: boolean`
     - When set to `true`, this method will throw if any of the query refetch tasks fail.
+  - cancelRefetch?: boolean
+    - When set to `true`, then the current request will be cancelled before a new request is made
 
 **Returns**
 
@@ -389,9 +393,11 @@ queryClient.resetQueries(queryKey, { exact: true })
   - `refetchPage: (page: TData, index: number, allPages: TData[]) => boolean`
     - Only for [Infinite Queries](../guides/infinite-queries#refetchpage)
     - Use this function to specify which pages should be refetched
-- `resetOptions?: ResetOptions`:
+- `options?: ResetOptions`:
   - `throwOnError?: boolean`
     - When set to `true`, this method will throw if any of the query refetch tasks fail.
+  - cancelRefetch?: boolean
+    - When set to `true`, then the current request will be cancelled before a new request is made
 
 **Returns**
 

src/core/queryClient.ts

@@ -289,6 +289,7 @@ export class QueryClient {
     const promises = notifyManager.batch(() =>
       this.queryCache.findAll(filters).map(query =>
         query.fetch(undefined, {
+          ...options,
           meta: { refetchPage: filters?.refetchPage },
         })
       )

src/core/tests/queryClient.test.tsx

@@ -847,6 +847,30 @@ describe('queryClient', () => {
       expect(queryFn1).toHaveBeenCalledTimes(1)
       expect(queryFn2).toHaveBeenCalledTimes(1)
     })
+
+    test('should cancel ongoing fetches if cancelRefetch option is passed', async () => {
+      const key = queryKey()
+      const cancelFn = jest.fn()
+      const observer = new QueryObserver(queryClient, {
+        queryKey: key,
+        enabled: false,
+        initialData: 1,
+      })
+      observer.subscribe()
+
+      queryClient.fetchQuery(key, () => {
+        const promise = new Promise(resolve => {
+          setTimeout(() => resolve(5), 10)
+        })
+        // @ts-expect-error
+        promise.cancel = cancelFn
+        return promise
+      })
+
+      await queryClient.refetchQueries(undefined, { cancelRefetch: true })
+      observer.destroy()
+      expect(cancelFn).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('resetQueries', () => {

src/core/types.ts

@@ -273,13 +273,8 @@ export interface ResetQueryFilters<TPageData = unknown>
   extends QueryFilters,
     RefetchPageFilters<TPageData> {}
 
-export interface InvalidateOptions {
-  throwOnError?: boolean
-}
-
-export interface ResetOptions {
-  throwOnError?: boolean
-}
+export interface InvalidateOptions extends RefetchOptions {}
+export interface ResetOptions extends RefetchOptions {}
 
 export interface FetchNextPageOptions extends ResultOptions {
   cancelRefetch?: boolean