diff --git a/packages/vue-query/src/__tests__/useMutation.test.ts b/packages/vue-query/src/__tests__/useMutation.test.ts index 3ca4578f09..3c3b860664 100644 --- a/packages/vue-query/src/__tests__/useMutation.test.ts +++ b/packages/vue-query/src/__tests__/useMutation.test.ts @@ -90,13 +90,12 @@ describe('useMutation', () => { entity: string otherObject: { name: string - someFn: Function } } const mutationKey = ref([ { 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(['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)) diff --git a/packages/vue-query/src/useMutation.ts b/packages/vue-query/src/useMutation.ts index e53715c025..42a8201f63 100644 --- a/packages/vue-query/src/useMutation.ts +++ b/packages/vue-query/src/useMutation.ts @@ -205,21 +205,20 @@ export function parseMutationArgs< ): WithQueryClientKey< MutationObserverOptions > { - 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< diff --git a/packages/vue-query/src/utils.ts b/packages/vue-query/src/utils.ts index 2d719c9039..a754fc477c 100644 --- a/packages/vue-query/src/utils.ts +++ b/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 { - return Array.isArray(isRef(value) ? value.value : value) +export function isMutationKey(value: unknown): value is MutationKey { + return Array.isArray(value) } export function updateState(