react query useMutation typescript getting error on args-CodePudding

I try to use react query useMutation with typescript and still getting error on args when i want to trigger my function. I'm new in typescript i try to googled, and on stackoverflow also give me infomation how to type useMutation. But i still do not understand why i'm getting error TS2345: Argument of type 'string' is not assignable to parameter of type 'Login'

interface Login{
    username: string,
    password: string

}

interface Token{
    access_token: string,
    refresh_token: string
}


const loginToServer = useMutation<Token, unknown,  Login>(newLogin => axios.post(url, {
        username: username,
        password: password
    }),
)


<Button label="Sign In" icon="pi pi-user" 
       onClick={() => loginToServer.mutate(username, password)}/> // revieve an error TS2345: Argument of type 'string' is not assignable to parameter of type 'Login'.

CodePudding user response：

You need to pass your variables to mutate as an object of shape Login, so wrap your username, password in { and }).

<Button label="Sign In" icon="pi pi-user" 
       onClick={() => loginToServer.mutate( { username, password } )}/>