mismatch between the expected function signature for the mutation and what is being provided

[OzanOcak]

I try to handle registering with react query but I am stack with type error, I have no clue what is wrong, calling registerUser gives type error in below code

// useRegister.ts
import { useMutation } from "@tanstack/react-query";
import { RegisterFormInputs, RegisterResponse } from "../types/user";

// Function to handle registration
const registerUser = async (
data: RegisterFormInputs
): Promise => {
const response = await fetch("/api/register", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});

if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || "Registration failed");
}

return response.json(); // Ensure this matches RegisterResponse
};

// Custom hook for registration
export const useRegister = () => {
return useMutation<RegisterResponse, Error, RegisterFormInputs>(
registerUser, // <---------------------- Type '(data: RegisterFormInputs) => Promise' has no properties in common with type 'UseMutationOptions<RegisterResponse, Error, RegisterFormInputs, unknown>'.ts(2559)
{
onSuccess: (data: RegisterResponse) => {
console.log("User registered:", data);
},
onError: (error: Error) => {
console.error("Registration error:", error.message);
},
}
);
};

and those are my types
export interface RegisterFormInputs {
username: string;
email: string;
password: string;
}

export interface RegisterResponse {
id: string
username: string;
email: string;
role: string;
}

[TkDodo]

1. show a typescript playground!
2. do not use generic type annotations, just write like you would with javascript and let the types infer:

- return useMutation<RegisterResponse, Error, RegisterFormInputs>(
+ return useMutation(

see:

• https://tkdodo.eu/blog/react-query-and-type-script
• https://tanstack.com/query/v5/docs/framework/react/typescript#type-inference

[OzanOcak]

Thank you for quick response, I forgot useMutetion's argument title, mutationFn . the resources are useful. I appreciate it.