From 35c086f4ea7ef705c075ad41dfaaf940e72cf421 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Fri, 2 Aug 2024 20:41:39 +0200
Subject: [PATCH] fix(query-core): make CancelledError extend Error (#7843)

* fix(query-core): make CancelledError extend Error

* test: instanceof Error check

* chore: delete left-over comment
---
 packages/query-core/src/__tests__/query.test.tsx | 4 +++-
 packages/query-core/src/query.ts                 | 6 +++---
 packages/query-core/src/retryer.ts               | 3 ++-
 packages/react-query/src/useBaseQuery.ts         | 3 ---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/query-core/src/__tests__/query.test.tsx b/packages/query-core/src/__tests__/query.test.tsx
index e61f8664ae..1f76177467 100644
--- a/packages/query-core/src/__tests__/query.test.tsx
+++ b/packages/query-core/src/__tests__/query.test.tsx
@@ -155,7 +155,7 @@ describe('query', () => {
     const visibilityMock = mockVisibilityState('hidden')
 
     let count = 0
-    let result
+    let result: unknown
 
     const promise = queryClient.fetchQuery({
       queryKey: key,
@@ -183,8 +183,10 @@ describe('query', () => {
     // Check if the error is set to the cancelled error
     try {
       await promise
+      expect.unreachable()
     } catch {
       expect(isCancelledError(result)).toBe(true)
+      expect(result instanceof Error).toBe(true)
     } finally {
       // Reset visibilityState to original value
       visibilityMock.mockRestore()
diff --git a/packages/query-core/src/query.ts b/packages/query-core/src/query.ts
index 09e43e415a..b51ff6b5be 100644
--- a/packages/query-core/src/query.ts
+++ b/packages/query-core/src/query.ts
@@ -577,7 +577,7 @@ export class Query<
             }),
           }
         case 'error':
-          const error = action.error as unknown
+          const error = action.error
 
           if (isCancelledError(error) && error.revert && this.#revertState) {
             return { ...this.#revertState, fetchStatus: 'idle' }
@@ -585,11 +585,11 @@ export class Query<
 
           return {
             ...state,
-            error: error as TError,
+            error,
             errorUpdateCount: state.errorUpdateCount + 1,
             errorUpdatedAt: Date.now(),
             fetchFailureCount: state.fetchFailureCount + 1,
-            fetchFailureReason: error as TError,
+            fetchFailureReason: error,
             fetchStatus: 'idle',
             status: 'error',
           }
diff --git a/packages/query-core/src/retryer.ts b/packages/query-core/src/retryer.ts
index e677b0b9ef..5eaa793bcd 100644
--- a/packages/query-core/src/retryer.ts
+++ b/packages/query-core/src/retryer.ts
@@ -54,10 +54,11 @@ export function canFetch(networkMode: NetworkMode | undefined): boolean {
     : true
 }
 
-export class CancelledError {
+export class CancelledError extends Error {
   revert?: boolean
   silent?: boolean
   constructor(options?: CancelOptions) {
+    super('CancelledError')
     this.revert = options?.revert
     this.silent = options?.silent
   }
diff --git a/packages/react-query/src/useBaseQuery.ts b/packages/react-query/src/useBaseQuery.ts
index c70230a7b6..381ff79ca8 100644
--- a/packages/react-query/src/useBaseQuery.ts
+++ b/packages/react-query/src/useBaseQuery.ts
@@ -100,9 +100,6 @@ export function useBaseQuery<
 
   // Handle suspense
   if (shouldSuspend(defaultedOptions, result)) {
-    // Do the same thing as the effect right above because the effect won't run
-    // when we suspend but also, the component won't re-mount so our observer would
-    // be out of date.
     throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)
   }