CODEWITHSUNDEEP
reactjsredux-toolkitrtk-query
Yobin Pun
Yobin Pun

Reputation: 59

How can we reset the data and state of the mutation in RTK query , like reset function in React Query for mutation?

I am using RTK query with Redux Tool kit for the React project. The table rows are updated with "updateProductCategory" function provided by RTK mutation. But after the update of each table row, "updateProductCategoryResult" is filled with data and state of that updated row(that means, if the update is successful , then "isSuccess" = true).

So for the next update, as "isSuccess" mutation state is "true" , the SnackBar (i.e toaster) will popup when the modal form to edit row is opened (before the actual edit occurs). So, to avoid such unwanted Snack Bar pop up, I want to reset the data and state of mutation result after mutation occurs,i.e. "updateProductCategoryResult" to have isSuccess = false, isError = false .

Basically I need reset() function like in React Query mutation.

I searched into the RTK query document , but couldn't found any thing related to reset of mutation state and data.

Code:

//State to open SnackBar
const [snackBarProps, setSnackBarProps] = useState({
    alertType: "",
    message: "",
  });

// Hooks to fetch product category
const { data = [], isFetching } = useGetProductCategoryQuery(queryBody);

//Hook to update product category
const [updateProductCategory, updateProductCategoryResult] = useUpdateProductCategoryMutation();

// SnackBar while "Updating Category".
// Bug occured here, as "updateProductCategoryResult.isSuccess" will be  
// true after every successful update, which changes the "snackBarProps" 
// state by calling "setSnackBarProps" and pops the Snack Bar when just 
// opening the modal to edit row data of the table.

  useEffect(() => {
    if (updateProductCategoryResult.isError) {
      setSnackBarProps({
        alertType: "error",
        message: "Updating Product Category Failed !!!",
      });
    }

    if (updateProductCategoryResult.isSuccess) {
      setSnackBarProps({
        alertType: "success",
        message: "Updated Product Category Successfully !!!",
      });

      dispatch(closeModal());
    }

    return () => {
      setSnackBarProps({
        alertType: "",
        message: "",
      });
    };
  }, [updateProductCategoryResult, isFetching]);

Upvotes: 3

Views: 8949

Answers (2)

Brogrammer
Brogrammer

Reputation: 482

Why you don't use then() and catch() instead?

const showAlert = (error?: unkown) => {
const strError = `Updating Product Category Failed. ${error}`
const srtSucces = "Updated Product Category Successfully"

   setSnackBarProps({
      alertType: Boolean(error) ? "error" : "success",
      message: Boolean(error) ? strError : srtSucces,
   });

   dispatch(closeModal());
}

const onUpdate = (data: unknown) => {
  updateProductCategory(data).then(() => {
      showAlert()
  }).catch((error) => {
      showAlert(error)
  }) 
}

Upvotes: 0

phry
phry

Reputation: 44266

Just use a different dependency array - right now it is triggering on every change of updateProductCategoryResult - but you want it to trigger if isError or isSuccess change:

 [updateProductCategoryResult.isError, updateProductCategoryResult.isSuccess, isFetching]);

Upvotes: 0

Related Questions