React Query useMutation TypeScript传参触发TS2345类型错误

你为useMutation传入的第三个泛型参数是Login接口，这个泛型的作用是约束mutate方法的入参类型：mutate仅接收单个符合Login结构的对象，不支持将username、password拆分为两个独立参数传入。
你当前写的loginToServer.mutate(username, password)，TS会校验第一个入参username（string类型）是否匹配Login类型，自然抛出Argument of type 'string' is not assignable to parameter of type 'Login'的错误。
另外你的mutation请求函数也存在取值错误：函数入参是调用mutate时传入的变量，你没有从入参newLogin中解构字段，直接写username、password是拿不到实际传入值的。

• 调整mutate调用逻辑，将用户名、密码组装为符合Login接口结构的对象传入
• 修正mutation请求函数的取值逻辑，从入参对象中读取对应字段

修复后的代码如下：

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: newLogin.username,
        password: newLogin.password
    })
)

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

补充：React Query v3/v4版本的useMutation泛型顺序固定为<返回数据类型, 错误类型, 入参变量类型, 上下文类型>，第三个泛型会严格约束mutate方法的入参格式，传参不符合结构时TS会直接抛出类型错误。

内容的提问来源于stack exchange，提问作者Dmitriy_kzn