You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I would like for mutation hooks to return a callback to reset mutation status back to their initial state so that the isSuccess, isError, etc. flags are all false.
The rational is for cases like modals whose contents change in response to mutation status change where the modal may need to be re-opened after closing. It's possible to get this behavior by restructuring your component hierarchy so that the hook's component gets unmounted, or by abstracting access to state, but the first isn't always possible and the second is messier than simply resetting the mutation status as a counter to firing the mutation's trigger function.
Example:
importReactfrom'react';import{useAddToCartMutation}from'./api';importModalfrom'./Modal';interfaceProps{isOpen?: boolean;onClose?: ()=>void;// Consumer will use this to set isOpen to false}constAddToCartModal=(props: Props)=>{const[addToCart,addToCartMutation]=useAddToCartMutation();consthandleAddToCart=()=>{addToCart();}consthandleClose=()=>{setIsOpen(false);props.onClose();}useEffect(()=>{if(props.isOpen){addToCartMutation.reset();// <--- HERE}},[props.isOpen]);return<Modalopen={props.isOpen}>{addToCartMutation.isFetching ? <div>Adding to cart...</div> :
addToCartMutation.isError ? <><div>An error occurred</div><div><buttononClick={handleClose}>Close</div> :
addToCartMutation.isSuccess ? <><div>Thank you!</div><div><buttononClick={handleClose}>Close</div> :
<buttononClick={handleAddToCart}>Add to Cart</button></Modal>};
The text was updated successfully, but these errors were encountered:
I would like for mutation hooks to return a callback to reset mutation status back to their initial state so that the isSuccess, isError, etc. flags are all false.
The rational is for cases like modals whose contents change in response to mutation status change where the modal may need to be re-opened after closing. It's possible to get this behavior by restructuring your component hierarchy so that the hook's component gets unmounted, or by abstracting access to state, but the first isn't always possible and the second is messier than simply resetting the mutation status as a counter to firing the mutation's trigger function.
Example:
The text was updated successfully, but these errors were encountered: