fix(angular-query): ensure initial mutation pending state is emitted

Author: ThiloAschebrock

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

@@ -389,6 +389,37 @@ describe('injectMutation', () => {
     expect(mutation2!.options.mutationKey).toEqual(['fake', 'updatedValue'])
   })
 
+  test('should have pending state when mutating in constructor', async () => {
+    @Component({
+      selector: 'app-fake',
+      template: `
+        <span>{{ mutation.isPending() ? 'pending' : 'not pending' }}</span>
+      `,
+    })
+    class FakeComponent {
+      mutation = injectMutation(() => ({
+        mutationKey: ['fake'],
+        mutationFn: () => sleep(10).then(() => 'fake'),
+      }))
+
+      constructor() {
+        this.mutation.mutate()
+      }
+    }
+
+    const fixture = TestBed.createComponent(FakeComponent)
+    const { debugElement } = fixture
+    const span = debugElement.query(By.css('span'))
+
+    vi.advanceTimersByTime(1)
+    expect(span.nativeElement.textContent).toEqual('pending')
+
+    await vi.advanceTimersByTimeAsync(11)
+    fixture.detectChanges()
+
+    expect(span.nativeElement.textContent).toEqual('not pending')
+  })
+
   describe('throwOnError', () => {
     test('should evaluate throwOnError when mutation is expected to throw', async () => {
       const err = new Error('Expected mock error. All is well!')

packages/angular-query-experimental/src/inject-mutation.ts

@@ -1,9 +1,9 @@
 import {
+  DestroyRef,
   Injector,
   NgZone,
   assertInInjectionContext,
   computed,
-  effect,
   inject,
   signal,
   untracked,
@@ -18,7 +18,7 @@ import {
 import { signalProxy } from './signal-proxy'
 import { PENDING_TASKS } from './pending-tasks-compat'
 import type { PendingTaskRef } from './pending-tasks-compat'
-import type { DefaultError, MutationObserverResult } from '@tanstack/query-core'
+import type { DefaultError } from '@tanstack/query-core'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
@@ -58,6 +58,7 @@ export function injectMutation<
 ): CreateMutationResult<TData, TError, TVariables, TOnMutateResult> {
   !options?.injector && assertInInjectionContext(injectMutation)
   const injector = options?.injector ?? inject(Injector)
+  const destroyRef = injector.get(DestroyRef)
   const ngZone = injector.get(NgZone)
   const pendingTasks = injector.get(PENDING_TASKS)
   const queryClient = injector.get(QueryClient)
@@ -78,7 +79,15 @@ export function injectMutation<
     > | null = null
 
     return computed(() => {
-      return (instance ||= new MutationObserver(queryClient, optionsSignal()))
+      const observerOptions = optionsSignal()
+      return untracked(() => {
+        if (instance) {
+          instance.setOptions(observerOptions)
+        } else {
+          instance = new MutationObserver(queryClient, observerOptions)
+        }
+        return instance
+      })
     })
   })()
 
@@ -91,93 +100,69 @@ export function injectMutation<
     }
   })
 
-  /**
-   * Computed signal that gets result from mutation cache based on passed options
-   */
-  const resultFromInitialOptionsSignal = computed(() => {
-    const observer = observerSignal()
-    return observer.getCurrentResult()
-  })
+  let cleanup: () => void = () => {}
 
   /**
-   * Signal that contains result set by subscriber
+   * Returning a writable signal from a computed is similar to `linkedSignal`,
+   * but compatible with Angular < 19
+   *
+   * Compared to `linkedSignal`, this pattern requires extra parentheses:
+   * - Accessing value: `result()()`
+   * - Setting value: `result().set(newValue)`
    */
-  const resultFromSubscriberSignal = signal<MutationObserverResult<
-    TData,
-    TError,
-    TVariables,
-    TOnMutateResult
-  > | null>(null)
+  const linkedResultSignal = computed(() => {
+    const observer = observerSignal()
 
-  effect(
-    () => {
-      const observer = observerSignal()
-      const observerOptions = optionsSignal()
+    return untracked(() => {
+      const result = signal(observer.getCurrentResult())
 
-      untracked(() => {
-        observer.setOptions(observerOptions)
-      })
-    },
-    {
-      injector,
-    },
-  )
-
-  effect(
-    (onCleanup) => {
-      // observer.trackResult is not used as this optimization is not needed for Angular
-      const observer = observerSignal()
+      cleanup()
       let pendingTaskRef: PendingTaskRef | null = null
 
-      untracked(() => {
-        const unsubscribe = ngZone.runOutsideAngular(() =>
-          observer.subscribe(
-            notifyManager.batchCalls((state) => {
-              ngZone.run(() => {
-                // Track pending task when mutation is pending
-                if (state.isPending && !pendingTaskRef) {
-                  pendingTaskRef = pendingTasks.add()
-                }
-
-                // Clear pending task when mutation is no longer pending
-                if (!state.isPending && pendingTaskRef) {
-                  pendingTaskRef()
-                  pendingTaskRef = null
-                }
-
-                if (
-                  state.isError &&
-                  shouldThrowError(observer.options.throwOnError, [state.error])
-                ) {
-                  ngZone.onError.emit(state.error)
-                  throw state.error
-                }
-
-                resultFromSubscriberSignal.set(state)
-              })
-            }),
-          ),
-        )
-        onCleanup(() => {
-          // Clean up any pending task on destroy
-          if (pendingTaskRef) {
-            pendingTaskRef()
-            pendingTaskRef = null
-          }
-          unsubscribe()
-        })
-      })
-    },
-    {
-      injector,
-    },
-  )
+      const unsubscribe = ngZone.runOutsideAngular(() =>
+        observer.subscribe(
+          notifyManager.batchCalls((state) => {
+            ngZone.run(() => {
+              // Track pending task when mutation is pending
+              if (state.isPending && !pendingTaskRef) {
+                pendingTaskRef = pendingTasks.add()
+              }
+
+              // Clear pending task when mutation is no longer pending
+              if (!state.isPending && pendingTaskRef) {
+                pendingTaskRef()
+                pendingTaskRef = null
+              }
+
+              if (
+                state.isError &&
+                shouldThrowError(observer.options.throwOnError, [state.error])
+              ) {
+                ngZone.onError.emit(state.error)
+                throw state.error
+              }
+
+              result.set(state)
+            })
+          }),
+        ),
+      )
+
+      cleanup = () => {
+        // Clean up any pending task on destroy
+        if (pendingTaskRef) {
+          pendingTaskRef()
+          pendingTaskRef = null
+        }
+        unsubscribe()
+      }
+
+      return result
+    })
+  })
 
   const resultSignal = computed(() => {
-    const resultFromSubscriber = resultFromSubscriberSignal()
-    const resultFromInitialOptions = resultFromInitialOptionsSignal()
-
-    const result = resultFromSubscriber ?? resultFromInitialOptions
+    const result = linkedResultSignal()()
 
     return {
       ...result,
@@ -186,6 +171,8 @@ export function injectMutation<
     }
   })
 
+  destroyRef.onDestroy(cleanup)
+
   return signalProxy(resultSignal) as CreateMutationResult<
     TData,
     TError,