fix(angular-query): run observer listeners in angular zone

TanStack · Mar 7, 2024 · ba7ba4f · ba7ba4f
1 parent 1e1bbcf
commit ba7ba4f
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 10 deletions.
diff --git a/packages/angular-query-experimental/src/create-base-query.ts b/packages/angular-query-experimental/src/create-base-query.ts
@@ -1,6 +1,7 @@
 import {
   DestroyRef,
   Injector,
+  NgZone,
   computed,
   effect,
   inject,
@@ -11,7 +12,12 @@ import {
 import { notifyManager } from '@tanstack/query-core'
 import { signalProxy } from './signal-proxy'
 import { lazyInit } from './util/lazy-init/lazy-init'
-import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
+import type {
+  QueryClient,
+  QueryKey,
+  QueryObserver,
+  QueryObserverResult,
+} from '@tanstack/query-core'
 import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types'
 
 /**
@@ -37,6 +43,7 @@ export function createBaseQuery<
   queryClient: QueryClient,
 ): CreateBaseQueryResult<TData, TError> {
   const injector = inject(Injector)
+  const ngZone = inject(NgZone)
 
   return lazyInit(() => {
     return runInInjectionContext(injector, () => {
@@ -81,7 +88,11 @@ export function createBaseQuery<
 
       // observer.trackResult is not used as this optimization is not needed for Angular
       const unsubscribe = observer.subscribe(
-        notifyManager.batchCalls((val) => resultSignal.set(val)),
+        notifyManager.batchCalls((val: QueryObserverResult<TData, TError>) => {
+          ngZone.run(() => {
+            resultSignal.set(val)
+          })
+        }),
       )
       destroyRef.onDestroy(unsubscribe)
 

diff --git a/packages/angular-query-experimental/src/inject-is-fetching.ts b/packages/angular-query-experimental/src/inject-is-fetching.ts
@@ -1,4 +1,4 @@
-import { DestroyRef, inject, signal } from '@angular/core'
+import { DestroyRef, NgZone, inject, signal } from '@angular/core'
 import { type QueryFilters, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
@@ -11,6 +11,7 @@ export function injectIsFetching(
   return assertInjector(injectIsFetching, injector, () => {
     const queryClient = injectQueryClient()
     const destroyRef = inject(DestroyRef)
+    const ngZone = inject(NgZone)
 
     const cache = queryClient.getQueryCache()
     // isFetching is the prev value initialized on mount *
@@ -24,7 +25,9 @@ export function injectIsFetching(
         if (isFetching !== newIsFetching) {
           // * and update with each change
           isFetching = newIsFetching
-          result.set(isFetching)
+          ngZone.run(() => {
+            result.set(isFetching)
+          })
         }
       }),
     )

diff --git a/packages/angular-query-experimental/src/inject-is-mutating.ts b/packages/angular-query-experimental/src/inject-is-mutating.ts
@@ -1,4 +1,4 @@
-import { DestroyRef, inject, signal } from '@angular/core'
+import { DestroyRef, NgZone, inject, signal } from '@angular/core'
 import { type MutationFilters, notifyManager } from '@tanstack/query-core'
 import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
@@ -11,6 +11,7 @@ export function injectIsMutating(
   return assertInjector(injectIsMutating, injector, () => {
     const queryClient = injectQueryClient()
     const destroyRef = inject(DestroyRef)
+    const ngZone = inject(NgZone)
 
     const cache = queryClient.getMutationCache()
     // isMutating is the prev value initialized on mount *
@@ -24,7 +25,9 @@ export function injectIsMutating(
         if (isMutating !== newIsMutating) {
           // * and update with each change
           isMutating = newIsMutating
-          result.set(isMutating)
+          ngZone.run(() => {
+            result.set(isMutating)
+          })
         }
       }),
     )

diff --git a/packages/angular-query-experimental/src/inject-mutation-state.ts b/packages/angular-query-experimental/src/inject-mutation-state.ts
@@ -1,4 +1,11 @@
-import { DestroyRef, effect, inject, signal, untracked } from '@angular/core'
+import {
+  DestroyRef,
+  NgZone,
+  effect,
+  inject,
+  signal,
+  untracked,
+} from '@angular/core'
 import {
   type DefaultError,
   type Mutation,
@@ -47,6 +54,7 @@ export function injectMutationState<TResult = MutationState>(
   return assertInjector(injectMutationState, options?.injector, () => {
     const destroyRef = inject(DestroyRef)
     const queryClient = injectQueryClient()
+    const ngZone = inject(NgZone)
 
     const mutationCache = queryClient.getMutationCache()
 
@@ -74,7 +82,9 @@ export function injectMutationState<TResult = MutationState>(
             getResult(mutationCache, mutationStateOptionsFn()),
           )
           if (result() !== nextResult) {
-            result.set(nextResult)
+            ngZone.run(() => {
+              result.set(nextResult)
+            })
           }
         }),
       )

diff --git a/packages/angular-query-experimental/src/inject-mutation.ts b/packages/angular-query-experimental/src/inject-mutation.ts
@@ -1,6 +1,7 @@
 import {
   DestroyRef,
   Injector,
+  NgZone,
   computed,
   effect,
   inject,
@@ -14,7 +15,11 @@ import { injectQueryClient } from './inject-query-client'
 import { noop } from './util'
 
 import { lazyInit } from './util/lazy-init/lazy-init'
-import type { DefaultError, QueryClient } from '@tanstack/query-core'
+import type {
+  DefaultError,
+  MutationObserverResult,
+  QueryClient,
+} from '@tanstack/query-core'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
@@ -36,6 +41,7 @@ export function injectMutation<
     const queryClient = injectQueryClient()
     const currentInjector = inject(Injector)
     const destroyRef = inject(DestroyRef)
+    const ngZone = inject(NgZone)
 
     return lazyInit(() =>
       runInInjectionContext(currentInjector, () => {
@@ -61,7 +67,15 @@ export function injectMutation<
         const result = signal(observer.getCurrentResult())
 
         const unsubscribe = observer.subscribe(
-          notifyManager.batchCalls((val) => result.set(val)),
+          notifyManager.batchCalls(
+            (
+              val: MutationObserverResult<TData, TError, TVariables, TContext>,
+            ) => {
+              ngZone.run(() => {
+                result.set(val)
+              })
+            },
+          ),
         )
 
         destroyRef.onDestroy(unsubscribe)