fix(mutation-observer): snapshot mutateOptions before dispatching callbacks

packages/query-core/src/__tests__/mutationObserver.test.tsx

@@ -530,4 +530,53 @@ describe('mutationObserver', () => {
 
     unsubscribe()
   })
+
+  it('should not invoke onSettled with the next mutation options when mutate is called inside onSuccess', async () => {
+    // Regression test for https://github.com/TanStack/query/issues/11451
+    // If mutate() is called inside onSuccess, this.#mutateOptions is overwritten
+    // before onSettled fires. Without snapshotting mutateOptions at the start of
+    // #notify(), onSettled would receive the next mutation's callback but the
+    // current mutation's data/variables.
+    const onSettledFirst = vi.fn()
+    const onSettledSecond = vi.fn()
+
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: (value: number) => Promise.resolve(value),
+    })
+
+    const unsubscribe = mutation.subscribe(() => {})
+
+    mutation.mutate(1, {
+      onSuccess: () => {
+        // Trigger a second mutation from inside onSuccess of the first
+        mutation.mutate(2, { onSettled: onSettledSecond })
+      },
+      onSettled: onSettledFirst,
+    })
+
+    // Let both mutations settle
+    await vi.runAllTimersAsync()
+
+    // onSettled for the first mutation must have been called with data=1
+    expect(onSettledFirst).toHaveBeenCalledTimes(1)
+    expect(onSettledFirst).toHaveBeenCalledWith(
+      1,
+      null,
+      1,
+      undefined,
+      expect.any(Object),
+    )
+
+    // onSettled for the second mutation must have been called with data=2
+    expect(onSettledSecond).toHaveBeenCalledTimes(1)
+    expect(onSettledSecond).toHaveBeenCalledWith(
+      2,
+      null,
+      2,
+      undefined,
+      expect.any(Object),
+    )
+
+    unsubscribe()
+  })
 })

packages/query-core/src/mutationObserver.ts

@@ -250,7 +250,12 @@ export class MutationObserver<
   #notify(action?: Action<TData, TError, TVariables, TOnMutateResult>): void {
     notifyManager.batch(() => {
       // First trigger the mutate callbacks
-      if (this.#mutateOptions && this.hasListeners()) {
+      // Snapshot mutateOptions before dispatching — a callback (e.g. onSuccess)
+      // may call mutate() again, which overwrites this.#mutateOptions in place.
+      // Without the snapshot, onSettled would fire with the *next* mutation's
+      // options but the *current* mutation's data/variables.
+      const mutateOptions = this.#mutateOptions
+      if (mutateOptions && this.hasListeners()) {
         const variables = this.#currentResult.variables!
         const onMutateResult = this.#currentResult.context
 
@@ -262,7 +267,7 @@ export class MutationObserver<
 
         if (action?.type === 'success') {
           try {
-            this.#mutateOptions.onSuccess?.(
+            mutateOptions.onSuccess?.(
               action.data,
               variables,
               onMutateResult,
@@ -272,7 +277,7 @@ export class MutationObserver<
             void Promise.reject(e)
           }
           try {
-            this.#mutateOptions.onSettled?.(
+            mutateOptions.onSettled?.(
               action.data,
               null,
               variables,
@@ -284,7 +289,7 @@ export class MutationObserver<
           }
         } else if (action?.type === 'error') {
           try {
-            this.#mutateOptions.onError?.(
+            mutateOptions.onError?.(
               action.error,
               variables,
               onMutateResult,
@@ -294,7 +299,7 @@ export class MutationObserver<
             void Promise.reject(e)
           }
           try {
-            this.#mutateOptions.onSettled?.(
+            mutateOptions.onSettled?.(
               undefined,
               action.error,
               variables,