useMutation - type errors with my mutation function

[cliffordfajardo]

Hey fellow react-query users,

I'm using Typescript with react-query and I'm getting type errors raised for the mutation function I'm passing into useMutation.

This is the typescript error I'm receiving:

Argument of type '(username: string, password: string) => Promise<CognitoUser>' is not assignable to parameter of type 'MutationFunction<CognitoUser, string>'

I created a super small codesanbox of my code. Two of the useMutation examples are throwing type errors but the 3rd one isn't (using a much simpler function)

Any ideas on how to work around this? Any help is appreciated 😄

Code Sanbox Link

//imports....

class AuthenticationService {
  static async signin(username: string, password: string){
      const AWSCognitoUser = await Auth.signIn({username,password}) as CognitoUser;
      return AWSCognitoUser;
  }
  static async deleteSomething(username:string){
    return "SUCCESS"
  }
}

export default function App() {
  // Example1: type errors
  const [signin1] = useMutation(AuthenticationService.signin)
  
  // Example2  - type errors
  const [signin2] = useMutation(async (username:string, password:string):Promise<CognitoUser> => {
      return await AuthenticationService.signin(username, password)
  })

  // Example3, no type errors
  const [deleteUser] = useMutation(AuthenticationService.deleteSomething)

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
    </div>
  );
}

[courier-new]

Hi @cliffordfajardo! It's quite possible you solved this by now, but for anyone else who might happen across this discussion thread, I wanted to share the realization I had when I ran into this!

A MutationFunction only accepts one argument, which is why in your example deleteSomething(username) works fine but signin(username, password) does not. You can see this from the full type definition too:

export type MutationFunction<TResult, TVariables = unknown> = (
  variables: TVariables
) => Promise<TResult>

It's easy to miss that when the type gets collapsed to MutationFunction<CognitoUser, string> in the error message, though. 😄

The way around this is pass the variables to the mutation as object, as it recommends in the docs (silly me forgot about this little important detail). So:

const signin = ({ username, password}: {username: string, password: string}) => {
    const AWSCognitoUser = await Auth.signIn({username,password}) as CognitoUser;
    return AWSCognitoUser;
}

const [signin1] = useMutation(signin)

// Invoke later
const me = signin({username: "super-user", password: "password1234"})

Hope this might help! 🙂

[xegulon]

This is not emphasized enough in the docs @courier-new , that you have to give it only one argument

[TkDodo]

feel free to PR to the docs. It's mentioned on the mutations guide:

In the example above, you also saw that you can pass variables to your mutations function by calling the mutate function with a single variable or object.

But I can see that the example uses a single string variable, and maybe it isn't clear that it cannot be multiple variables.