fix: stop retry when observers unmount

Author: boschni

src/core/query.ts

@@ -299,8 +299,12 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
       if (!this.observers.length) {
         // If the transport layer does not support cancellation
         // we'll let the query continue so the result can be cached
-        if (this.retryer && this.retryer.isTransportCancelable) {
-          this.retryer.cancel()
+        if (this.retryer) {
+          if (this.retryer.isTransportCancelable) {
+            this.retryer.cancel()
+          } else {
+            this.retryer.cancelRetry()
+          }
         }
 
         this.scheduleGc()

src/core/retryer.ts

@@ -58,6 +58,7 @@ export function isCancelledError(value: any): value is CancelledError {
 
 export class Retryer<TData = unknown, TError = unknown> {
   cancel: (options?: CancelOptions) => void
+  cancelRetry: () => void
   continue: () => void
   failureCount: number
   isPaused: boolean
@@ -66,12 +67,16 @@ export class Retryer<TData = unknown, TError = unknown> {
   promise: Promise<TData>
 
   constructor(config: RetryerConfig<TData, TError>) {
+    let cancelRetry = false
     let cancelFn: ((options?: CancelOptions) => void) | undefined
     let continueFn: (() => void) | undefined
     let promiseResolve: (data: TData) => void
     let promiseReject: (error: TError) => void
 
     this.cancel = cancelOptions => cancelFn?.(cancelOptions)
+    this.cancelRetry = () => {
+      cancelRetry = true
+    }
     this.continue = () => continueFn?.()
     this.failureCount = 0
     this.isPaused = false
@@ -154,7 +159,7 @@ export class Retryer<TData = unknown, TError = unknown> {
             (typeof retry === 'number' && this.failureCount < retry) ||
             (typeof retry === 'function' && retry(this.failureCount, error))
 
-          if (!shouldRetry) {
+          if (cancelRetry || !shouldRetry) {
             // We are done if the query does not need to be retried
             reject(error)
             return
@@ -173,8 +178,13 @@ export class Retryer<TData = unknown, TError = unknown> {
                 return pause()
               }
             })
-            // Try again
-            .then(run)
+            .then(() => {
+              if (cancelRetry) {
+                reject(error)
+              } else {
+                run()
+              }
+            })
         })
     }
 

src/core/tests/queryCache.test.tsx

@@ -676,6 +676,29 @@ describe('queryCache', () => {
     consoleMock.mockRestore()
   })
 
+  test('QueryObserver should stop retry when unsubscribing', async () => {
+    const consoleMock = mockConsoleError()
+    const key = queryKey()
+    const testClient = new QueryClient()
+    let count = 0
+    const observer = new QueryObserver(testClient, {
+      queryKey: key,
+      queryFn: () => {
+        count++
+        return Promise.reject('reject')
+      },
+      retry: 10,
+      retryDelay: 50,
+    })
+    const unsubscribe = observer.subscribe()
+    await sleep(70)
+    unsubscribe()
+    await sleep(200)
+    expect(count).toBe(2)
+    testClient.clear()
+    consoleMock.mockRestore()
+  })
+
   test('cancelQueries should revert queries to their previous state', async () => {
     const consoleMock = mockConsoleError()
     const key1 = queryKey()