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]);