fix: queries should not end up in an error state when a component unmounts

Author: boschni

src/core/query.ts

@@ -301,7 +301,7 @@ export class Query<
         // we'll let the query continue so the result can be cached
         if (this.retryer) {
           if (this.retryer.isTransportCancelable) {
-            this.retryer.cancel()
+            this.retryer.cancel({ revert: true })
           } else {
             this.retryer.cancelRetry()
           }

src/core/tests/query.test.tsx

@@ -247,8 +247,7 @@ describe('query', () => {
     expect(cancel).toHaveBeenCalled()
     expect(query.state).toMatchObject({
       data: undefined,
-      status: 'error',
-      errorUpdateCount: 1,
+      status: 'idle',
     })
   })
 

src/react/tests/useInfiniteQuery.test.tsx

@@ -726,6 +726,8 @@ describe('useInfiniteQuery', () => {
     const states: UseInfiniteQueryResult<number>[] = []
     let fetches = 0
 
+    const initialData = { pages: [1, 2, 3, 4], pageParams: [1, 2, 3, 4] }
+
     function List() {
       const state = useInfiniteQuery(
         key,
@@ -735,7 +737,7 @@ describe('useInfiniteQuery', () => {
           return Number(pageParam)
         },
         {
-          initialData: { pages: [1, 2, 3, 4], pageParams: [1, 2, 3, 4] },
+          initialData,
           getNextPageParam: lastPage => lastPage + 1,
         }
       )
@@ -764,8 +766,9 @@ describe('useInfiniteQuery', () => {
     expect(states.length).toBe(1)
     expect(fetches).toBe(2)
     expect(queryClient.getQueryState(key)).toMatchObject({
-      status: 'error',
-      error: expect.any(CancelledError),
+      data: initialData,
+      status: 'success',
+      error: null,
     })
   })
 

src/react/tests/useQuery.test.tsx

@@ -3353,7 +3353,7 @@ describe('useQuery', () => {
     renderWithClient(queryClient, <Page />)
 
     await sleep(100)
-    expect(states.length).toBe(5)
+    expect(states.length).toBe(4)
     // Load query 1
     expect(states[0]).toMatchObject({
       status: 'loading',
@@ -3367,15 +3367,10 @@ describe('useQuery', () => {
     // Load query 1
     expect(states[2]).toMatchObject({
       status: 'loading',
-      error: expect.any(CancelledError),
-    })
-    // State update
-    expect(states[3]).toMatchObject({
-      status: 'loading',
-      error: expect.any(CancelledError),
+      error: null,
     })
     // Loaded query 1
-    expect(states[4]).toMatchObject({
+    expect(states[3]).toMatchObject({
       status: 'success',
       error: null,
     })