feat(vue-query/mutationOptions): add getter support and fix test descriptions to match actual behavior

Author: sukvvon

packages/vue-query/src/__tests__/mutationOptions.test-d.ts

@@ -14,8 +14,8 @@ import type { VueMutationOptions } from '../types'
 
 describe('mutationOptions', () => {
   it('should not allow excess properties', () => {
-    // @ts-expect-error this is a good error, because onMutates does not exist!
     mutationOptions({
+      // @ts-expect-error this is a good error, because onMutates does not exist!
       mutationFn: () => Promise.resolve(5),
       mutationKey: ['key'],
       onMutates: 1000,
@@ -217,4 +217,30 @@ describe('mutationOptions', () => {
       }),
     })
   })
+
+  it('should allow getter and infer types correctly', () => {
+    const options = mutationOptions(() => ({
+      mutationKey: ['key'] as const,
+      mutationFn: () => Promise.resolve('data'),
+      onSuccess: (data) => {
+        expectTypeOf(data).toEqualTypeOf<string>()
+      },
+    }))
+
+    const resolved = options()
+    expectTypeOf(resolved.mutationFn).not.toBeUndefined()
+    expectTypeOf(resolved.mutationKey).not.toBeUndefined()
+  })
+
+  it('should allow getter without mutationKey', () => {
+    const options = mutationOptions(() => ({
+      mutationFn: () => Promise.resolve(5),
+      onSuccess: (data) => {
+        expectTypeOf(data).toEqualTypeOf<number>()
+      },
+    }))
+
+    const resolved = options()
+    expectTypeOf(resolved.mutationFn).not.toBeUndefined()
+  })
 })

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

@@ -340,50 +340,43 @@ describe('mutationOptions', () => {
     expect(states.value).toEqual(['data1'])
   })
 
-  it('should work with options getter and be reactive when used with useIsMutating', async () => {
-    const keyRef = ref('isMutatingGetter2')
-    const mutationOpts = mutationOptions({
-      mutationKey: ['isMutatingGetter'],
+  it('should work with getter passed to mutationOptions when used with useIsMutating', async () => {
+    const keyRef = ref('isMutatingGetter')
+    const mutationOpts = mutationOptions(() => ({
+      mutationKey: [keyRef.value],
       mutationFn: () => sleep(10).then(() => 'data'),
-    })
+    }))
 
     const { mutate } = useMutation(mutationOpts)
     mutate()
 
-    const isMutating = useIsMutating(() => ({
+    const isMutating = useIsMutating({
       mutationKey: [keyRef.value],
-    }))
-
-    expect(isMutating.value).toEqual(0)
-
-    keyRef.value = 'isMutatingGetter'
+    })
 
     await vi.advanceTimersByTimeAsync(0)
-
     expect(isMutating.value).toEqual(1)
+
+    await vi.advanceTimersByTimeAsync(10)
+    expect(isMutating.value).toEqual(0)
   })
 
-  it('should work with options getter and be reactive when used with useMutationState', async () => {
-    const keyRef = ref('useMutationStateGetter2')
-    const mutationOpts = mutationOptions({
-      mutationKey: ['useMutationStateGetter'],
+  it('should work with getter passed to mutationOptions when used with useMutationState', async () => {
+    const keyRef = ref('useMutationStateGetter')
+    const mutationOpts = mutationOptions(() => ({
+      mutationKey: [keyRef.value],
       mutationFn: (params: string) => sleep(10).then(() => params),
-    })
+    }))
 
     const { mutate } = useMutation(mutationOpts)
     mutate('foo')
 
-    const states = useMutationState(() => ({
+    const states = useMutationState({
       filters: { mutationKey: [keyRef.value], status: 'pending' },
       select: (mutation) => mutation.state.variables,
-    }))
-
-    expect(states.value).toEqual([])
-
-    keyRef.value = 'useMutationStateGetter'
+    })
 
     await vi.advanceTimersByTimeAsync(0)
-
     expect(states.value).toEqual(['foo'])
   })
 

packages/vue-query/src/mutationOptions.ts

@@ -15,6 +15,20 @@ export function mutationOptions<
   VueMutationOptions<TData, TError, TVariables, TOnMutateResult>,
   'mutationKey'
 >
+export function mutationOptions<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TOnMutateResult = unknown,
+>(
+  options: () => WithRequired<
+    VueMutationOptions<TData, TError, TVariables, TOnMutateResult>,
+    'mutationKey'
+  >,
+): () => WithRequired<
+  VueMutationOptions<TData, TError, TVariables, TOnMutateResult>,
+  'mutationKey'
+>
 export function mutationOptions<
   TData = unknown,
   TError = DefaultError,
@@ -35,7 +49,14 @@ export function mutationOptions<
   TVariables = void,
   TOnMutateResult = unknown,
 >(
-  options: VueMutationOptions<TData, TError, TVariables, TOnMutateResult>,
-): VueMutationOptions<TData, TError, TVariables, TOnMutateResult> {
+  options: () => Omit<
+    VueMutationOptions<TData, TError, TVariables, TOnMutateResult>,
+    'mutationKey'
+  >,
+): () => Omit<
+  VueMutationOptions<TData, TError, TVariables, TOnMutateResult>,
+  'mutationKey'
+>
+export function mutationOptions(options: unknown) {
   return options
 }