fix(vue-query): fix bug where ref is destructured

packages/vue-query/src/__tests__/useMutation.test.ts

@@ -90,13 +90,12 @@ describe('useMutation', () => {
       entity: string
       otherObject: {
         name: string
-        someFn: Function
       }
     }
     const mutationKey = ref<MutationKeyTest[]>([
       {
         entity: 'test',
-        otherObject: { name: 'objectName', someFn: () => null },
+        otherObject: { name: 'objectName' },
       },
     ])
     const queryClient = useQueryClient()
@@ -127,6 +126,29 @@ describe('useMutation', () => {
     )
   })
 
+  test('should allow for non-options object (mutationFn or mutationKey) passed as arg1 & arg2 to trigger reactive updates', async () => {
+    const mutationKey = ref<string[]>(['foo2'])
+    const mutationFn = ref((params: string) => successMutator(params))
+    const queryClient = useQueryClient()
+    const mutationCache = queryClient.getMutationCache()
+    const mutation = useMutation(mutationKey, mutationFn)
+
+    mutationKey.value = ['bar2']
+    let proof = false
+    mutationFn.value = (params: string) => {
+      proof = true
+      return successMutator(params)
+    }
+    await flushPromises()
+
+    mutation.mutate('xyz')
+    await flushPromises()
+
+    const mutations = mutationCache.find({ mutationKey: ['bar2'] })
+    expect(mutations?.options.mutationKey).toEqual(['bar2'])
+    expect(proof).toEqual(true)
+  })
+
   test('should reset state after invoking mutation.reset', async () => {
     const mutation = useMutation((params: string) => errorMutator(params))
 

packages/vue-query/src/useMutation.ts

@@ -205,21 +205,20 @@ export function parseMutationArgs<
 ): WithQueryClientKey<
   MutationObserverOptions<TData, TError, TVariables, TContext>
 > {
-  let options = arg1
-  if (isMutationKey(arg1)) {
-    const plainFn = isRef(arg2) ? arg2.value : arg2
-    const plainOptions = isRef(arg3) ? arg3.value : arg3
-    if (typeof plainFn === 'function') {
-      options = { ...plainOptions, mutationKey: arg1, mutationFn: plainFn }
+  const plainArg1 = isRef(arg1) ? arg1.value : arg1
+  const plainArg2 = isRef(arg2) ? arg2.value : arg2
+  let options = plainArg1
+  if (isMutationKey(plainArg1)) {
+    if (typeof plainArg2 === 'function') {
+      const plainArg3 = isRef(arg3) ? arg3.value : arg3
+      options = { ...plainArg3, mutationKey: plainArg1, mutationFn: plainArg2 }
     } else {
-      options = { ...arg2, mutationKey: arg1 }
+      options = { ...plainArg2, mutationKey: plainArg1 }
     }
   }
 
-  const plainFn = isRef(arg1) ? arg1.value : arg1
-  const plainOptions = isRef(arg2) ? arg2.value : arg2
-  if (typeof plainFn === 'function') {
-    options = { ...plainOptions, mutationFn: plainFn }
+  if (typeof plainArg1 === 'function') {
+    options = { ...plainArg2, mutationFn: plainArg1 }
   }
 
   return cloneDeepUnref(options) as UseMutationOptions<

packages/vue-query/src/utils.ts

@@ -2,7 +2,6 @@
 import type { QueryKey, MutationKey } from '@tanstack/query-core'
 import { isRef, unref } from 'vue-demi'
 import type { UnwrapRef } from 'vue-demi'
-import type { MaybeRef } from './types'
 
 export const VUE_QUERY_CLIENT = 'VUE_QUERY_CLIENT'
 
@@ -15,8 +14,8 @@ export function isQueryKey(value: unknown): value is QueryKey {
   return Array.isArray(value)
 }
 
-export function isMutationKey(value: unknown): value is MaybeRef<MutationKey> {
-  return Array.isArray(isRef(value) ? value.value : value)
+export function isMutationKey(value: unknown): value is MutationKey {
+  return Array.isArray(value)
 }
 
 export function updateState(