If you look at the guide, the useMutation Hook argument is structured like this.
const {
data,
error,
isError,
isIdle,
isLoading,
isPaused,
isSuccess,
mutate,
mutateAsync,
reset,
status,
} = useMutation(mutationFn, {
cacheTime,
mutationKey,
networkMode,
onError,
onMutate,
onSettled,
onSuccess,
retry,
retryDelay,
useErrorBoundary,
meta
})
The asynchronous axios function is structured like this:
async function setSupplierRegister(
basic: Basic,
operator: Operator,
delivery: Delivery,
bank: Bank
): Promise<void> {
await axiosInstance.post("/register", {
basic: basic,
operator: operator,
delivery: delivery,
bank: bank,
});
}
The asynchronous function requires 4 arguments, but only 1 data value can be retrieved in the useMutation Hook argument. Therefore, if you declare 4 arguments to useMutation , an error occurs.
export function useRegister(): UseMutateFunction<
void,
unknown,
any,
unknown
> {
const { mutate } = useMutation(
// (basic: Basic, operator: Operator, delivery: Delivery, bank: Bank) => setSupplierRegister(basic, operator, delivery, bank), error
(data: any) => setSupplierRegister(data),
);
return mutate;
}
How should I handle it to declare 4 arguments in the useMutation function?
You can add arguments in the array for example:
export function useRegister(): UseMutateFunction<
void,
unknown,
any,
unknown
> {
const { mutate } = useMutation(
// (basic: Basic, operator: Operator, delivery: Delivery, bank: Bank) => setSupplierRegister(basic, operator, delivery, bank), error
([basic: Basic, operator: Operator, delivery: Delivery, bank: Bank]) => setSupplierRegister(basic, operator, delivery, bank),
);
return mutate;
}
and than call mutate:
mutate([basic, operator, delivery, bank])
The second option is to use an object but you will need to refactor the setSupplierRegister function:
async function setSupplierRegister(data): Promise<void> {
await axiosInstance.post("/register", {
data
});
}
you can leave useMutation as it is, and you call mutate like this:
mutate({ basic, operator, delivery, bank })
In my opinion, the second approach is much cleaner and readable.