fix(query-core): make CancelledError extend Error (#7843)

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

* test: instanceof Error check

* chore: delete left-over comment

Author: TkDodo

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()

packages/query-core/src/query.ts

@@ -577,19 +577,19 @@ 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' }
           }
 
           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',
           }

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
   }

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)
   }