fix(core): make sure mutations get updated options

this fixes an issue around stale closures where callbacks are not updated, thus are called with wrong values in the closure

Author: TkDodo

packages/query-core/src/mutation.ts

@@ -89,31 +89,37 @@ export class Mutation<
   TContext = unknown,
 > extends Removable {
   state: MutationState<TData, TError, TVariables, TContext>
-  options: MutationOptions<TData, TError, TVariables, TContext>
+  options!: MutationOptions<TData, TError, TVariables, TContext>
   mutationId: number
 
   private observers: MutationObserver<TData, TError, TVariables, TContext>[]
+  private defaultOptions?: MutationOptions<TData, TError, TVariables, TContext>
   private mutationCache: MutationCache
   private logger: Logger
   private retryer?: Retryer<TData>
 
   constructor(config: MutationConfig<TData, TError, TVariables, TContext>) {
     super()
 
-    this.options = {
-      ...config.defaultOptions,
-      ...config.options,
-    }
+    this.defaultOptions = config.defaultOptions
     this.mutationId = config.mutationId
     this.mutationCache = config.mutationCache
     this.logger = config.logger || defaultLogger
     this.observers = []
     this.state = config.state || getDefaultState()
 
-    this.updateCacheTime(this.options.cacheTime)
+    this.setOptions(config.options)
     this.scheduleGc()
   }
 
+  setOptions(
+    options?: MutationOptions<TData, TError, TVariables, TContext>,
+  ): void {
+    this.options = { ...this.defaultOptions, ...options }
+
+    this.updateCacheTime(this.options.cacheTime)
+  }
+
   get meta(): MutationMeta | undefined {
     return this.options.meta
   }

packages/query-core/src/mutationObserver.ts

@@ -74,6 +74,7 @@ export class MutationObserver<
         observer: this,
       })
     }
+    this.currentMutation?.setOptions(this.options)
   }
 
   protected onUnsubscribe(): void {

packages/query-core/src/tests/mutations.test.tsx

@@ -2,6 +2,7 @@ import type { QueryClient } from '..'
 import { createQueryClient, executeMutation, queryKey, sleep } from './utils'
 import type { MutationState } from '../mutation'
 import { MutationObserver } from '../mutationObserver'
+import { waitFor } from '@testing-library/react'
 
 describe('mutations', () => {
   let queryClient: QueryClient
@@ -358,4 +359,34 @@ describe('mutations', () => {
     expect(onSuccess).not.toHaveBeenCalled()
     expect(onSettled).not.toHaveBeenCalled()
   })
+
+  test('mutation callbacks should see updated options', async () => {
+    const onSuccess = jest.fn()
+
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async () => {
+        sleep(100)
+        return 'update'
+      },
+      onSuccess: () => {
+        onSuccess(1)
+      },
+    })
+
+    void mutation.mutate()
+
+    mutation.setOptions({
+      mutationFn: async () => {
+        sleep(100)
+        return 'update'
+      },
+      onSuccess: () => {
+        onSuccess(2)
+      },
+    })
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+
+    expect(onSuccess).toHaveBeenCalledWith(2)
+  })
 })