fix(query-core): prevent state override when observer remount occurs with signal consumption

Author: joseph0926

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

@@ -1192,4 +1192,48 @@ describe('query', () => {
     expect(initialDataFn).toHaveBeenCalledTimes(1)
     expect(query.state.data).toBe('initial data')
   })
+
+  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 }) => {
+      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(10)
+
+    query.removeObserver(observer1)
+
+    const observer2 = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn,
+    })
+
+    query.addObserver(observer2)
+
+    query.fetch()
+
+    await promise1.catch(() => {})
+
+    await Promise.resolve()
+
+    expect(query.state.fetchStatus).toBe('fetching')
+  })
 })

packages/query-core/src/query.ts

@@ -349,7 +349,7 @@ export class Query<
         // we'll let the query continue so the result can be cached
         if (this.#retryer) {
           if (this.#abortSignalConsumed) {
-            this.#retryer.cancel({ revert: true })
+            this.#retryer.cancel({ revert: true, isObserverRemoval: true })
           } else {
             this.#retryer.cancelRetry()
           }
@@ -553,16 +553,22 @@ 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 (this.state.data === undefined) {
+              throw error
+            }
+            return this.state.data
+          }
+
           this.setState({
             ...this.#revertState,
             fetchStatus: 'idle' as const,
           })
-          // transform error into reverted state data
-          // if the initial fetch was cancelled, we have no data, so we have
-          // to get reject with a CancelledError
+
           if (this.state.data === undefined) {
             throw error
           }
+
           return this.state.data
         }
       }

packages/query-core/src/retryer.ts

@@ -58,10 +58,12 @@ export function canFetch(networkMode: NetworkMode | undefined): boolean {
 export class CancelledError extends Error {
   revert?: boolean
   silent?: boolean
+  isObserverRemoval?: boolean
   constructor(options?: CancelOptions) {
     super('CancelledError')
     this.revert = options?.revert
     this.silent = options?.silent
+    this.isObserverRemoval = options?.isObserverRemoval
   }
 }
 

packages/query-core/src/types.ts

@@ -1329,6 +1329,7 @@ export interface DefaultOptions<TError = DefaultError> {
 export interface CancelOptions {
   revert?: boolean
   silent?: boolean
+  isObserverRemoval?: boolean
 }
 
 export interface SetDataOptions {