Use queueMicrotask instead of notifyManager.batchCalls to improve timing

Author: arnoud-dv

packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts

@@ -7,7 +7,7 @@ import {
   provideZonelessChangeDetection,
 } from '@angular/core'
 import { sleep } from '@tanstack/query-test-utils'
-import { injectInfiniteQuery, provideTanStackQuery, QueryClient } from '..'
+import { QueryClient, injectInfiniteQuery, provideTanStackQuery } from '..'
 import { expectSignals } from './test-utils'
 
 describe('injectInfiniteQuery', () => {

packages/angular-query-experimental/src/__tests__/inject-query.test.ts

@@ -1,12 +1,13 @@
 import {
   ApplicationRef,
+  ChangeDetectionStrategy,
   Component,
   Injector,
+  NgZone,
   computed,
   input,
   provideZonelessChangeDetection,
   signal,
-  ChangeDetectionStrategy,
 } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { HttpClient, provideHttpClient } from '@angular/common/http'
@@ -554,6 +555,14 @@ describe('injectQuery', () => {
     })
 
     test('should throw when throwOnError is true', async () => {
+      const zone = TestBed.inject(NgZone)
+      const errorPromise = new Promise<Error>((resolve) => {
+        const sub = zone.onError.subscribe((error) => {
+          sub.unsubscribe()
+          resolve(error as Error)
+        })
+      })
+
       @Component({
         selector: 'app-test',
         template: '',
@@ -571,10 +580,19 @@ describe('injectQuery', () => {
 
       TestBed.createComponent(TestComponent).detectChanges()
 
-      await expect(vi.runAllTimersAsync()).rejects.toThrow('Some error')
+      await vi.runAllTimersAsync()
+      await expect(errorPromise).resolves.toEqual(Error('Some error'))
     })
 
     test('should throw when throwOnError function returns true', async () => {
+      const zone = TestBed.inject(NgZone)
+      const errorPromise = new Promise<Error>((resolve) => {
+        const sub = zone.onError.subscribe((error) => {
+          sub.unsubscribe()
+          resolve(error as Error)
+        })
+      })
+
       @Component({
         selector: 'app-test',
         template: '',
@@ -592,7 +610,8 @@ describe('injectQuery', () => {
 
       TestBed.createComponent(TestComponent).detectChanges()
 
-      await expect(vi.runAllTimersAsync()).rejects.toThrow('Some error')
+      await vi.runAllTimersAsync()
+      await expect(errorPromise).resolves.toEqual(Error('Some error'))
     })
   })
 
@@ -715,9 +734,8 @@ describe('injectQuery', () => {
       expect(query.status()).toBe('pending')
       expect(query.data()).toBeUndefined()
 
-      const stablePromise = app.whenStable()
       await vi.advanceTimersByTimeAsync(60)
-      await stablePromise
+      await app.whenStable()
 
       expect(query.status()).toBe('success')
       expect(query.data()).toBe('test data')
@@ -767,9 +785,8 @@ describe('injectQuery', () => {
       expect(query.status()).toBe('pending')
 
       // Advance timers and wait for Angular to be "stable"
-      const stablePromise = app.whenStable()
       await vi.advanceTimersByTimeAsync(20)
-      await stablePromise
+      await app.whenStable()
 
       // Query should be complete after whenStable() thanks to PendingTasks integration
       expect(query.status()).toBe('success')
@@ -865,6 +882,7 @@ describe('injectQuery', () => {
       const query = component.query
 
       // Initially disabled
+      await vi.advanceTimersByTimeAsync(0)
       await app.whenStable()
       expect(query.status()).toBe('pending')
       expect(query.data()).toBeUndefined()
@@ -874,6 +892,7 @@ describe('injectQuery', () => {
       enabledSignal.set(true)
       fixture.detectChanges()
 
+      await vi.advanceTimersByTimeAsync(0)
       await app.whenStable()
       expect(query.status()).toBe('success')
       expect(query.data()).toBe('sync-data-1')

packages/angular-query-experimental/src/create-base-query.ts

@@ -1,5 +1,18 @@
-import { DestroyRef, NgZone, PendingTasks, computed, effect, inject, linkedSignal, untracked, } from '@angular/core'
-import { QueryClient, notifyManager, shouldThrowError, } from '@tanstack/query-core'
+import {
+  DestroyRef,
+  NgZone,
+  PendingTasks,
+  computed,
+  effect,
+  inject,
+  linkedSignal,
+  untracked,
+} from '@angular/core'
+import {
+  QueryClient,
+  notifyManager,
+  shouldThrowError,
+} from '@tanstack/query-core'
 import { signalProxy } from './signal-proxy'
 import { injectIsRestoring } from './inject-is-restoring'
 import type {
@@ -45,6 +58,7 @@ export function createBaseQuery<
     TQueryKey
   > | null = null
 
+  let destroyed = false
   let taskCleanupRef: (() => void) | null = null
 
   const startPendingTask = () => {
@@ -127,35 +141,39 @@ export function createBaseQuery<
 
     observer = new Observer(queryClient, options)
 
-    const unsubscribe = observer.subscribe(
-      notifyManager.batchCalls((state) => {
-        ngZone.run(() => {
-          if (state.fetchStatus !== 'idle') {
-            startPendingTask()
-          } else {
-            stopPendingTask()
-          }
-
-          if (
-            state.isError &&
-            !state.isFetching &&
-            shouldThrowError(observer!.options.throwOnError, [
-              state.error,
-              observer!.getCurrentQuery(),
-            ])
-          ) {
-            ngZone.onError.emit(state.error)
-            throw state.error
-          }
-          const trackedState = trackObserverResult(
-            state,
-            observer!.options.notifyOnChangeProps,
-          )
-          resultSignal.set(trackedState)
+    const unsubscribe = observer.subscribe((state) => {
+      if (state.fetchStatus !== 'idle') {
+        startPendingTask()
+      } else {
+        stopPendingTask()
+      }
+
+      queueMicrotask(() => {
+        if (destroyed) return
+        notifyManager.batch(() => {
+          ngZone.run(() => {
+            if (
+              state.isError &&
+              !state.isFetching &&
+              shouldThrowError(observer!.options.throwOnError, [
+                state.error,
+                observer!.getCurrentQuery(),
+              ])
+            ) {
+              ngZone.onError.emit(state.error)
+              throw state.error
+            }
+            const trackedState = trackObserverResult(
+              state,
+              observer!.options.notifyOnChangeProps,
+            )
+            resultSignal.set(trackedState)
+          })
         })
-      }),
-    )
+      })
+    })
     destroyRef.onDestroy(() => {
+      destroyed = true
       unsubscribe()
       stopPendingTask()
     })
@@ -164,7 +182,10 @@ export function createBaseQuery<
   const resultSignal = linkedSignal({
     source: defaultedOptionsSignal,
     computation: () => {
-      if (!observer) throw new Error('Observer is not initialized')
+      if (!observer)
+        throw new Error(
+          'injectQuery: QueryObserver not initialized yet. Avoid reading the query result during construction',
+        )
       const defaultedOptions = defaultedOptionsSignal()
       const result = observer.getOptimisticResult(defaultedOptions)
       return trackObserverResult(result, defaultedOptions.notifyOnChangeProps)