typescript react-query mutation error TS2554: Argument of type-CodePudding

I'm new with typescript i use react-query try to us mutate but it cause an error

TS2554: Expected 1-2 arguments, but got 3.

iterface:

interface ChangePassword{
    email: string;
    password: string;
    confirmPassword: string
}

function:

 const changePasswordOnClick = useMutation<Record<string, string>, unknown, ChangePassword>(
        () => axios.post(
            url,
            { email, password, new_password}, // all fine
        ),
        {
            onSuccess: (req) => {
                console.log('Request', req)

            },

            one rror: (newLogin) => {
                console.log('onError', newLogin);
            },
        },
    );

Problem (just piece of problem code):

onSubmit={async (data,
{setSubmitting, resetForm})=>{setSubmitting(true)                                 
                  changePasswordOnClick.mutate(
                     data.email, 
                    data.password, 
                    data.confirmPassword)} // TS2554: Expected 1-2 arguments, but got 3.

Why i'm getting this error? how to fix it?

CodePudding user response：

Because in mutate type we have

(variables: TVariables, options?: MutateOptions) => Promise<TData>

and you should change mutationFn:

const changePasswordOnClick = useMutation<Record<string, string>, unknown, ChangePassword>(
  (params: ChangePassword) => axios.post(url, params),
  {
    onSuccess: (req) => {
      console.log("Request", req)
    },

    one rror: (newLogin) => {
      console.log("onError", newLogin)
    },
  }
)

and mutate calling also:

changePasswordOnClick.mutate({
   confirmPassword: data.confirmPassword,
   email: data.email,
   password: data.password,
})

To match to the type