feat(core): changing mutationKeys should reset observer (#6511)

this allows key-ing of mutations without having to re-mount components using mutations; the mutationKey basically defines the identity of the mutation - it doesn't make much sense to keep data of a different mutationKey around at observer level if the key changes

Author: TkDodo

packages/query-core/src/mutationObserver.ts

@@ -1,7 +1,7 @@
 import { getDefaultState } from './mutation'
 import { notifyManager } from './notifyManager'
 import { Subscribable } from './subscribable'
-import { shallowEqualObjects } from './utils'
+import { hashKey, shallowEqualObjects } from './utils'
 import type { QueryClient } from './queryClient'
 import type {
   DefaultError,
@@ -53,9 +53,11 @@ export class MutationObserver<
   }
 
   setOptions(
-    options?: MutationObserverOptions<TData, TError, TVariables, TContext>,
+    options: MutationObserverOptions<TData, TError, TVariables, TContext>,
   ) {
-    const prevOptions = this.options
+    const prevOptions = this.options as
+      | MutationObserverOptions<TData, TError, TVariables, TContext>
+      | undefined
     this.options = this.#client.defaultMutationOptions(options)
     if (!shallowEqualObjects(prevOptions, this.options)) {
       this.#client.getMutationCache().notify({
@@ -65,6 +67,14 @@ export class MutationObserver<
       })
     }
     this.#currentMutation?.setOptions(this.options)
+
+    if (
+      prevOptions?.mutationKey &&
+      this.options.mutationKey &&
+      hashKey(prevOptions.mutationKey) !== hashKey(this.options.mutationKey)
+    ) {
+      this.reset()
+    }
   }
 
   protected onUnsubscribe(): void {

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

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { waitFor } from '@testing-library/react'
 import { MutationObserver } from '..'
-import { createQueryClient, sleep } from './utils'
+import { createQueryClient, queryKey, sleep } from './utils'
 import type { QueryClient } from '..'
 
 describe('mutationObserver', () => {
@@ -94,4 +94,36 @@ describe('mutationObserver', () => {
 
     unsubscribe()
   })
+
+  test('changing mutation keys should reset the observer', async () => {
+    const key = queryKey()
+    const mutation = new MutationObserver(queryClient, {
+      mutationKey: [...key, '1'],
+      mutationFn: async (text: string) => {
+        await sleep(5)
+        return text
+      },
+    })
+
+    const subscriptionHandler = vi.fn()
+
+    const unsubscribe = mutation.subscribe(subscriptionHandler)
+
+    await mutation.mutate('input')
+
+    expect(mutation.getCurrentResult()).toMatchObject({
+      status: 'success',
+      data: 'input',
+    })
+
+    mutation.setOptions({
+      mutationKey: [...key, '2'],
+    })
+
+    expect(mutation.getCurrentResult()).toMatchObject({
+      status: 'idle',
+    })
+
+    unsubscribe()
+  })
 })