我不能將多個數據 arguments 放在 react-query useMutation 掛鈎中嗎？

Question

如果您查看指南，useMutation Hook 參數的結構是這樣的。

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
})

異步 axios function 的結構如下：

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,
  });
}

異步 function 需要 4 個 arguments，但在 useMutation Hook 參數中只能檢索 1 個數據值。 因此，如果聲明4個arguments來使用Mutation，就會出現錯誤。

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;
}

我應該如何處理它在useMutation function中聲明4 arguments？

Answer 1

您可以在數組中添加 arguments 例如：

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;
}

而不是調用突變：

mutate([basic, operator, delivery, bank])

第二個選項是使用 object，但您需要重構setSupplierRegister function：

async function setSupplierRegister(data): Promise<void> {
  await axiosInstance.post("/register", {
    data
  });
}

您可以保留useMutation原樣，然后像這樣調用 mutate ：

mutate({ basic, operator, delivery, bank })

在我看來，第二種方法更簡潔易讀。