Can't I put multiple data arguments in the react-query useMutation hook?

Question

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?

Answer 1

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.