In React Query how can I write multiple mutate in a component?

user_16105421 0
Viewed 43

I have two mutate in a component.


 // first mutate

 const { mutate, isLoading } = useMutation(apiService.redeemCodeProduct, {
    onSuccess: (data) => {
      setRedeemProduct(data);
      setRedeemProductID(data.id);
    },
    onError: (error) => {
      error.status === 404
        ? enqueueSnackbar("The product was not found", { variant: "error" })
        : enqueueSnackbar("An unknown error occurred", { variant: "error" });
      handleClose();
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const urlRedeemCode = new URLSearchParams(redeemCode);
    mutate(urlRedeemCode);
  };


  // second mutate

  const { mutateRedeemSubmit } = useMutation(apiService.redeemCodeProductSubmit, {
    onSuccess: () => {
      enqueueSnackbar("The product was redeemed", { variant: "error" });
      handleClose();
    },
    onError: () => {
      enqueueSnackbar("An unknown error occurred", { variant: "error" });
    },
  });

  const handleSubmitRedeem = (e) => {
    e.preventDefault();
    mutateRedeemSubmit({redeemProductID, redeemCode})
  };

the problem is how can I write different mutate names in a component? My error is that mutate is not function

mutation react-query reactjs javascript
1 Answers

You can give different names likes this:

const { mutate: redeemCode, isLoading: redeemCodeLoading } = useMutation(apiService.redeemCodeProduct, ...)
 
const { mutate: reedemSubmit,isLoading: redeemSubmitLoading } = useMutation(apiService.redeemCodeProductSubmit, ...)
user_142605300
Related