Type error on useMutation - No overload matches this call.

[canrozanes]

Working on simple Password reset form and I've got the following:

class API {
   updatePassword(body: UpdatePasswordRequestBody): Promise<UpdatePasswordResponse>
}

// Inside the component
  const ChangePasswordForm = () => {
  const updatePasswordMutation = useMutation<UpdatePasswordResponse, string>({
      mutationFn: API.updatePassword,
    });

  return  (
     <>some jsx</>
  )
}

For the mutationFn line, I get the following type error:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ mutationFn: (values: UpdatePasswordResponse) => Promise<UpdatePasswordResponse>; onSuccess: () => void; }' is not assignable to parameter of type 'MutationKey'.
      Object literal may only specify known properties, and 'mutationFn' does not exist in type 'readonly unknown[]'.

Any ideas on how I could get around this?

[TkDodo]

just do:

  const updatePasswordMutation = useMutation({
      mutationFn: API.updatePassword,
    });

working TypeScript playground

[canrozanes]

Thanks @TkDodo. That does indeed work and the request/response object types are inferred properly . However, then my updatePasswordMutation.error is unknown. Is there anyway I can help TS infer that as well?

Here is a working Typescript playground of the issue.

[TkDodo]

this is expected as we cannot know what your function is rejecting the Promise with. Promises can only have a type for the fulfilled state. I've written about that here:

https://tkdodo.eu/blog/react-query-and-type-script#what-about-error

Your example shows this quite well, too:

if(updatePasswordMutation.error){
  return <Message>{updatePasswordMutation.error}</Message> // I could cast it to `as string` but that's a bit ugly
}

why would error be of type string? If it's an instanceOf Error, it should be .error.message. Have a look at this playground.

That said, we do plan on changing the type of error to default to Error in v5:

• make TError default to Error instead of unknown #4676