fix: prevent infinite fetch loop

Author: boschni

src/core/query.ts

@@ -163,14 +163,12 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
   private scheduleGc(): void {
     this.clearGcTimeout()
 
-    if (!this.observers.length && isValidTimeout(this.cacheTime)) {
-      if (!this.cacheTime) {
-        this.cache.remove(this)
-      } else {
-        this.gcTimeout = setTimeout(() => {
+    if (isValidTimeout(this.cacheTime)) {
+      this.gcTimeout = setTimeout(() => {
+        if (!this.observers.length) {
           this.cache.remove(this)
-        }, this.cacheTime)
-      }
+        }
+      }, this.cacheTime)
     }
   }
 
@@ -311,7 +309,11 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
           }
         }
 
-        this.scheduleGc()
+        if (this.cacheTime) {
+          this.scheduleGc()
+        } else {
+          this.cache.remove(this)
+        }
       }
 
       this.cache.notify(this)

src/core/queryObserver.ts

@@ -73,6 +73,8 @@ export class QueryObserver<
 
   protected onSubscribe(): void {
     if (this.listeners.length === 1) {
+      this.updateQuery()
+
       this.currentQuery.addObserver(this)
 
       if (this.willFetchOnMount()) {

src/react/tests/useQuery.test.tsx

@@ -463,6 +463,54 @@ describe('useQuery', () => {
     expect(states[1]).toMatchObject({ data: 'data' })
   })
 
+  it('should create a new query when re-mounting with cacheTime 0', async () => {
+    const key = queryKey()
+    const states: UseQueryResult<string>[] = []
+
+    function Page() {
+      const [toggle, setToggle] = React.useState(false)
+
+      React.useEffect(() => {
+        setActTimeout(() => {
+          setToggle(true)
+        }, 20)
+      }, [setToggle])
+
+      return toggle ? <Component key="1" /> : <Component key="2" />
+    }
+
+    function Component() {
+      const state = useQuery(
+        key,
+        async () => {
+          await sleep(5)
+          return 'data'
+        },
+        {
+          cacheTime: 0,
+        }
+      )
+      states.push(state)
+      return null
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    await sleep(100)
+
+    expect(states.length).toBe(5)
+    // First load
+    expect(states[0]).toMatchObject({ isLoading: true, isSuccess: false })
+    // First success
+    expect(states[1]).toMatchObject({ isLoading: false, isSuccess: true })
+    // Switch
+    expect(states[2]).toMatchObject({ isLoading: false, isSuccess: true })
+    // Second load
+    expect(states[3]).toMatchObject({ isLoading: true, isSuccess: false })
+    // Second success
+    expect(states[4]).toMatchObject({ isLoading: false, isSuccess: true })
+  })
+
   it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []