fix: make sure observers only subscribe to queries when started (TanStack#899)

Author: boschni

src/core/queryObserver.ts

@@ -24,13 +24,14 @@ export class QueryObserver<TResult, TError> {
     this.refetch = this.refetch.bind(this)
     this.fetchMore = this.fetchMore.bind(this)
 
-    // Subscribe to query
+    // Subscribe to the query
     this.updateQuery()
   }
 
   subscribe(listener?: UpdateListener<TResult, TError>): () => void {
     this.started = true
     this.updateListener = listener
+    this.currentQuery.subscribeObserver(this)
     this.optionalFetch()
     this.updateRefetchInterval()
     return this.unsubscribe.bind(this)
@@ -204,11 +205,14 @@ export class QueryObserver<TResult, TError> {
     }
 
     this.previousResult = this.currentResult
-    prevQuery?.unsubscribeObserver(this)
     this.currentQuery = newQuery
-    newQuery.subscribeObserver(this)
     this.currentResult = this.createResult()
 
+    if (this.started) {
+      prevQuery?.unsubscribeObserver(this)
+      this.currentQuery.subscribeObserver(this)
+    }
+
     return true
   }
 

src/react/tests/useQuery.test.tsx

@@ -234,6 +234,48 @@ describe('useQuery', () => {
     })
   })
 
+  // https://github.com/tannerlinsley/react-query/issues/896
+  it('should fetch data in Strict mode when refetchOnMount is false', async () => {
+    const key = queryKey()
+    const states: QueryResult<string>[] = []
+
+    function Page() {
+      const state = useQuery(
+        key,
+        async () => {
+          await sleep(10)
+          return 'test'
+        },
+        {
+          refetchOnMount: false,
+        }
+      )
+      states.push(state)
+      return null
+    }
+
+    render(
+      <React.StrictMode>
+        <Page />
+      </React.StrictMode>
+    )
+
+    await waitFor(() => expect(states.length).toBe(4))
+
+    expect(states[0]).toMatchObject({
+      data: undefined,
+    })
+    expect(states[1]).toMatchObject({
+      data: undefined,
+    })
+    expect(states[2]).toMatchObject({
+      data: 'test',
+    })
+    expect(states[3]).toMatchObject({
+      data: 'test',
+    })
+  })
+
   it('should share equal data structures between query results', async () => {
     const key = queryKey()
 

src/react/useBaseQuery.ts

@@ -42,6 +42,7 @@ export function useBaseQuery<TResult, TError>(
     }
 
     if (config.enabled && config.suspense && !result.isSuccess) {
+      observer.subscribe()
       throw observer.fetch().finally(() => {
         observer.unsubscribe(true)
       })