fix(query-core): improve observer remount handling with signal consumption

Author: joseph0926

packages/query-core/src/__tests__/query.test.tsx

@@ -1196,8 +1196,7 @@ describe('query', () => {
   test('should not override fetching state when revert happens after new observer subscribes', async () => {
     const key = queryKey()
 
-    // @ts-expect-error This field has been added for troubleshooting purposes. Disable ts error for testing.
-    const queryFn = vi.fn(async ({ signal }) => {
+    const queryFn = vi.fn(async ({ signal: _signal }) => {
       await sleep(50)
       return 'data'
     })
@@ -1236,4 +1235,47 @@ describe('query', () => {
 
     expect(query.state.fetchStatus).toBe('fetching')
   })
+
+  test('should throw CancelledError when revert happens with no data after observer removal', async () => {
+    const key = queryKey()
+
+    const queryFn = vi.fn(async ({ signal: _signal }) => {
+      await sleep(50)
+      return 'data'
+    })
+
+    const query = new Query({
+      client: queryClient,
+      queryKey: key,
+      queryHash: hashQueryKeyByOptions(key),
+      options: { queryFn },
+    })
+
+    const observer1 = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn,
+    })
+
+    query.addObserver(observer1)
+    const promise1 = query.fetch()
+
+    await vi.advanceTimersByTimeAsync(5)
+
+    query.removeObserver(observer1)
+
+    const observer2 = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn,
+    })
+
+    query.addObserver(observer2)
+    query.fetch()
+
+    await expect(promise1).rejects.toThrow(CancelledError)
+
+    expect(query.state.fetchStatus).toBe('fetching')
+
+    await vi.advanceTimersByTimeAsync(50)
+    expect(query.state.data).toBe('data')
+  })
 })

packages/query-core/src/query.ts

@@ -553,7 +553,7 @@ export class Query<
           // so we hatch onto that promise
           return this.#retryer.promise
         } else if (error.revert) {
-          if (error.isObserverRemoval && this.observers.length > 0) {
+          if (error.isObserverRemoval && this.isActive()) {
             if (this.state.data === undefined) {
               throw error
             }