useMutation - Type error: No overload matches this call.

[weebao]

Pretty sure a lot of people have already asked about this but since I have read all the posts and my code still isn't working, I would like to ask for some help.

I am currently using v4. I think I got everything right. mutationKey has to be a string array. mutationFn only takes one input. I still don't understand what went wrong.

I appreciate any help.

Type error: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ mutationKey: string[]; mutationFn: (input: void) => void; onMutate: () => void; onSuccess: (data: unknown) => void; onError: (err: any) => void; }' is not assignable to parameter of type 'MutationKey'.
      Object literal may only specify known properties, and 'mutationKey' does not exist in type 'readonly unknown[]'.

  50 |
  51 |   const postMutation = useMutation({
> 52 |     mutationKey: ["postMutation"],
     |     ^
  53 |     mutationFn: (input) => props.isAdd ? props.postFunction(input) : props.postFunction(props.fieldItems.id, input),      
  54 |     onMutate: () => {
  55 |       setModalLoading(true);

Here is the full function just in case:

  const postMutation = useMutation({
      mutationKey: ["postMutation"],
      mutationFn: (input) => props.isAdd ? props.postFunction(input) : props.postFunction(props.fieldItems.id, input),
      onMutate: () => {
        setModalLoading(true);
      },
      onSuccess: (data) => {
        setModalLoading(false);
        props.refetchFunction();
        handleCancel();
      },
      onError: (err: any) => console.log(`Submit Error: ${err}`)
    });

[TkDodo]

input is untyped. You need to add types to input of the mutationFn. Note that the error messages should get a lot better with v5 because there we don't have overloads anymore.

[weebao]

Type error: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ mutationKey: string[]; mutationFn: (input: string) => void; onMutate: () => void; onSuccess: (data: any) => void; onError: (err: any) => void; }' is not assignable to parameter of type 'MutationKey'.
      Object literal may only specify known properties, and 'mutationKey' does not exist in type 'readonly unknown[]'.

  50 | 
  51 |   const postMutation = useMutation({
> 52 |     mutationKey: ["postMutation"],
     |     ^
  53 |     mutationFn: (input: string) => props.isAdd ? props.postFunction(input) : props.postFunction(props.fieldItems.id, input),
  54 |     onMutate: () => {
  55 |       setModalLoading(true);

Hm I think that didn't work. I plan to wait until the stable version of v5 is officially released before migrating my project to it. Just want to say I admire your work and it's helped me a lot! I appreciate your help!

[TkDodo]

it works fine in a simplified playground:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCyyYEMbAQB2cAvnAGZQQhwDkAAnkangMYDWA9FOrmzAC0AR2TooATzoAoaXDhtirOGGphUcALyI58lRFYAxZEQGEiALjgAKYETA4rrKHYDmASi0A+OAAVqIMAYAHS8qBAANgBu6Lb2OO66pLLyiizwkKzYeATEWigY2fjm1gi6enAgOMXEANLoElYA2gBEmTBFuUQtALoANOV6VTnmhpY2dg4wTjAuRB7eKmqowe3Gpl1xU+4DFfLEAKJQ1FBW1uKncLhEEp6aPmnhEejBERCu1gAGAMrIAEaBeBHE5WAAkCAupE+iQqpHcAG4gA

[weebao]

Then probably I did something wrong in my local folder. I will take a look again. Thanks a lot Dominik