fix(core): do not update completed mutations (#7104)

* fix(core): do not update completed mutations

* test(core): verify mutations meta in cache with multiple mutations

* style(core): prettier formatting

---------

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: gautemo

packages/query-core/src/mutationObserver.ts

@@ -73,8 +73,8 @@ export class MutationObserver<
       hashKey(prevOptions.mutationKey) !== hashKey(this.options.mutationKey)
     ) {
       this.reset()
-    } else {
-      this.#currentMutation?.setOptions(this.options)
+    } else if (this.#currentMutation?.state.status === 'pending') {
+      this.#currentMutation.setOptions(this.options)
     }
   }
 

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

@@ -169,4 +169,158 @@ describe('mutationObserver', () => {
 
     unsubscribe()
   })
+
+  test('changing mutation meta should not affect successful mutations', async () => {
+    const mutationObserver = new MutationObserver(queryClient, {
+      meta: { a: 1 },
+      mutationFn: async (text: string) => {
+        await sleep(5)
+        return text
+      },
+    })
+
+    const subscriptionHandler = vi.fn()
+
+    const unsubscribe = mutationObserver.subscribe(subscriptionHandler)
+
+    await mutationObserver.mutate('input')
+
+    expect(queryClient.getMutationCache().find({})).toMatchObject({
+      options: { meta: { a: 1 } },
+      state: {
+        status: 'success',
+        data: 'input',
+      },
+    })
+
+    mutationObserver.setOptions({
+      meta: { a: 2 },
+    })
+
+    expect(queryClient.getMutationCache().find({})).toMatchObject({
+      options: { meta: { a: 1 } },
+      state: {
+        status: 'success',
+        data: 'input',
+      },
+    })
+
+    unsubscribe()
+  })
+
+  test('mutation cache should have different meta when updated between mutations', async () => {
+    const mutationFn = async (text: string) => {
+      await sleep(5)
+      return text
+    }
+    const mutationObserver = new MutationObserver(queryClient, {
+      meta: { a: 1 },
+      mutationFn,
+    })
+
+    const subscriptionHandler = vi.fn()
+
+    const unsubscribe = mutationObserver.subscribe(subscriptionHandler)
+
+    await mutationObserver.mutate('input')
+
+    mutationObserver.setOptions({
+      meta: { a: 2 },
+      mutationFn,
+    })
+
+    await mutationObserver.mutate('input')
+
+    const mutations = queryClient.getMutationCache().findAll()
+    expect(mutations[0]).toMatchObject({
+      options: { meta: { a: 1 } },
+      state: {
+        status: 'success',
+        data: 'input',
+      },
+    })
+    expect(mutations[1]).toMatchObject({
+      options: { meta: { a: 2 } },
+      state: {
+        status: 'success',
+        data: 'input',
+      },
+    })
+
+    unsubscribe()
+  })
+
+  test('changing mutation meta should not affect rejected mutations', async () => {
+    const mutationObserver = new MutationObserver(queryClient, {
+      meta: { a: 1 },
+      mutationFn: async (_: string) => {
+        await sleep(5)
+        return Promise.reject(new Error('err'))
+      },
+    })
+
+    const subscriptionHandler = vi.fn()
+
+    const unsubscribe = mutationObserver.subscribe(subscriptionHandler)
+
+    await mutationObserver.mutate('input').catch(() => undefined)
+
+    expect(queryClient.getMutationCache().find({})).toMatchObject({
+      options: { meta: { a: 1 } },
+      state: {
+        status: 'error',
+      },
+    })
+
+    mutationObserver.setOptions({
+      meta: { a: 2 },
+    })
+
+    expect(queryClient.getMutationCache().find({})).toMatchObject({
+      options: { meta: { a: 1 } },
+      state: {
+        status: 'error',
+      },
+    })
+
+    unsubscribe()
+  })
+
+  test('changing mutation meta should affect pending mutations', async () => {
+    const mutationObserver = new MutationObserver(queryClient, {
+      meta: { a: 1 },
+      mutationFn: async (text: string) => {
+        await sleep(20)
+        return text
+      },
+    })
+
+    const subscriptionHandler = vi.fn()
+
+    const unsubscribe = mutationObserver.subscribe(subscriptionHandler)
+
+    mutationObserver.mutate('input')
+
+    await sleep(0)
+
+    expect(queryClient.getMutationCache().find({})).toMatchObject({
+      options: { meta: { a: 1 } },
+      state: {
+        status: 'pending',
+      },
+    })
+
+    mutationObserver.setOptions({
+      meta: { a: 2 },
+    })
+
+    expect(queryClient.getMutationCache().find({})).toMatchObject({
+      options: { meta: { a: 2 } },
+      state: {
+        status: 'pending',
+      },
+    })
+
+    unsubscribe()
+  })
 })