mutationFn is missing from UseMutationOptions type

[Jeday]

Describe the bug
mutationFn is missing from declaration for UseMutationOptions. Preventing you from specifying mutation function in form of reusable config object similar to UseQueryOptions. Casting options object with mutationFn to any, bypassing type checks, code works fine and mutation function is called.

To Reproduce

In typescript project:

const mutation = useMutation({
    mutationFn: ()=>Promise.resolve(console.log('I am mutationFn'))
})

and run type checking.

Expected behavior
mutationFn should be an optional key in UseMutationOptions generic.

Desktop (please complete the following information):

• any

Smartphone (please complete the following information):

• any

[TkDodo]

UseMutationOptions does have an optional mutationKey:

https://github.com/tannerlinsley/react-query/blob/a88d80f6f7b2d96ab605ac08f4fbaed9a3bcd4b7/src/react/types.ts#L71-L77

can you create a codesandbox reproduction to show what is not working please?

[Jeday]

Here you go
Codesandox is not very good at marking typescript errors but it's there.
Please note mutationKey has nothing to do with it. I shouldn't have included it at all.

[TkDodo]

thank you. TypeScript underlines the mutationKey, but that is not the real culprit here. There error says:

No overload matches this call.

looking at the useMutation overloads, there is no version that accepts a mutationKey and a mutateFn in the same object. I think the object-only syntax is meant for usage together with the defaultMutationFn, but I'm not sure. So it's not the key that is missing, it's the mutateFn that is not here.

it seems to work at runtime, but not at compile time, right?

[Jeday]

Yes. The whole bug is just about the missing mutationFn key from UseMutationOptions type declaration. It's not crucial but currently I have to cast my mutation config objects to any and that makes it ugly and type unsafe.

[TkDodo]

I don't know why I misread the issue as mutationKey is missing 🤦 . I'll take a look at fixing this later :)

[TkDodo]

Those overloads are quite hard to get right on type level. I just looked up how useQuery is doing it, and TypeScript is fine with this:

  useQuery('key', () => Promise.resolve(23), {
    queryKey: 'foo',
    queryFn: () => Promise.resolve(5)
  })

seems a bit meh

[Jeday]

There is mutationFn but as an argument for an overload. Copying it to useMutationOptions should resolve issues. Don't forget to make it optional though so it won't break other overloads.

[TkDodo]

yes, it would, but then we would have the same "problem" as shown above from useQuery, right? when using an overload that passes the mutateFn as a separate argument, it should ideally Omit the mutateFn key from the allowed options object

[Jeday]

Yeah you can try to add tricky types for overloads with Omits and other trickery but that sounds like a huge step in direction of retyping the whole library. For now it's better just to add missing keys so that types are not behind actual functionality.

[christophemenager]

Hi there ! Thanks for the amazing work on this library ! ⭐

I have the same use case on my project, we would love to be able to write this in typescript :

 useMutation({
      mutationFn : () => console.log("mutation function called!"),
      mutationKey : xxxx,
    })

[tannerlinsley]

🎉 This issue has been resolved in version 3.13.12 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀