fix: avoid reverting state to a fetching one (#5997)

Andarist · TkDodo · web-flow · commit 88a8b30b7385 · 2023-09-13T08:22:47.000+02:00
* fix: avoid reverting state to a fetching one

* Update packages/query-core/src/tests/query.test.tsx

---------

Co-authored-by: Dominik Dorfmeister &lt;office@dorfmeister.cc&gt;
diff --git a/packages/query-core/src/query.ts b/packages/query-core/src/query.ts
@@ -559,7 +559,7 @@ export class Query<
           const error = action.error as unknown
 
           if (isCancelledError(error) && error.revert && this.revertState) {
-            return { ...this.revertState }
+            return { ...this.revertState, fetchStatus: 'idle' }
           }
 
           return {
diff --git a/packages/query-core/src/tests/query.test.tsx b/packages/query-core/src/tests/query.test.tsx
@@ -911,4 +911,56 @@ describe('query', () => {
 
     unsubscribe()
   })
+
+  test('should always revert to idle state (#5958)', async () => {
+    let mockedData = [1]
+
+    const key = queryKey()
+
+    const queryFn = jest.fn<
+      Promise<unknown>,
+      [QueryFunctionContext<ReturnType<typeof queryKey>>]
+    >()
+
+    queryFn.mockImplementation(({ signal }) => {
+      return new Promise((resolve, reject) => {
+        const abortListener = () => {
+          clearTimeout(timerId)
+          reject(signal!.reason)
+        }
+        signal!.addEventListener('abort', abortListener)
+
+        const timerId = setTimeout(() => {
+          signal!.removeEventListener('abort', abortListener)
+          resolve(mockedData.join(' - '))
+        }, 50)
+      })
+    })
+
+    const observer = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn,
+    })
+    const unsubscribe = observer.subscribe(() => undefined)
+    await sleep(60) // let it resolve
+
+    mockedData = [1, 2] // update "server" state in the background
+
+    queryClient.invalidateQueries(key)
+    await sleep(1)
+    queryClient.invalidateQueries(key)
+    await sleep(1)
+    unsubscribe() // unsubscribe to simulate unmount
+
+    // set up a new observer to simulate a mount of new component
+    const newObserver = new QueryObserver(queryClient, {
+      queryKey: key,
+      queryFn,
+    })
+
+    const spy = jest.fn()
+    newObserver.subscribe(({ data }) => spy(data))
+    await sleep(60) // let it resolve
+    expect(spy).toHaveBeenCalledWith('1 - 2')
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -559,7 +559,7 @@ export class Query<`
`559`	`559`	`const error = action.error as unknown`
`560`	`560`
`561`	`561`	`if (isCancelledError(error) && error.revert && this.revertState) {`
`562`		`- return { ...this.revertState }`
	`562`	`+ return { ...this.revertState, fetchStatus: 'idle' }`
`563`	`563`	`}`
`564`	`564`
`565`	`565`	`return {`