Remove effects from injectMutation to avoid synchronisation issues

Author: ThiloAschebrock

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

@@ -131,9 +131,17 @@ describe('injectMutation', () => {
 
     mutation.mutate('xyz')
 
-    const mutations = mutationCache.find({ mutationKey: ['2'] })
+    mutationKey.set(['3'])
 
-    expect(mutations?.options.mutationKey).toEqual(['2'])
+    mutation.mutate('xyz')
+
+    expect(mutationCache.find({ mutationKey: ['1'] })).toBeUndefined()
+    expect(
+      mutationCache.find({ mutationKey: ['2'] })?.options.mutationKey,
+    ).toEqual(['2'])
+    expect(
+      mutationCache.find({ mutationKey: ['3'] })?.options.mutationKey,
+    ).toEqual(['3'])
   })
 
   test('should reset state after invoking mutation.reset', async () => {

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

@@ -4,7 +4,6 @@ import {
   NgZone,
   assertInInjectionContext,
   computed,
-  effect,
   inject,
   signal,
   untracked,
@@ -71,7 +70,15 @@ export function injectMutation<
       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
+      })
     })
   })()
 
@@ -125,20 +132,6 @@ export function injectMutation<
     return observer.getCurrentResult()
   })
 
-  effect(
-    () => {
-      const observer = observerSignal()
-      const observerOptions = optionsSignal()
-
-      untracked(() => {
-        observer.setOptions(observerOptions)
-      })
-    },
-    {
-      injector,
-    },
-  )
-
   const resultSignal = computed(() => {
     const resultFromSubscriber = resultFromSubscriberSignal()
     const resultFromInitialOptions = resultFromInitialOptionsSignal()