Feature Request: Callback to Reset Mutation Status

[bradharms]

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:

import React from 'react';
import {useAddToCartMutation} from './api';
import Modal from './Modal';

interface Props {
  isOpen?: boolean;
  onClose?: () => void; // Consumer will use this to set isOpen to false
}

const AddToCartModal = (props: Props) => {
  const [addToCart, addToCartMutation] = useAddToCartMutation();

  const handleAddToCart = () => { addToCart(); }
  
  const handleClose = () => { setIsOpen(false); props.onClose(); }

  useEffect(() => {
   if (props.isOpen) {
     addToCartMutation.reset(); // <--- HERE
   }
  }, [props.isOpen]);

  return <Modal open={props.isOpen}>
    {addToCartMutation.isFetching ? <div>Adding to cart...</div> :
     addToCartMutation.isError ? <><div>An error occurred</div><div><button onClick={handleClose}>Close</div> :
     addToCartMutation.isSuccess ? <><div>Thank you!</div><div><button onClick={handleClose}>Close</div> :
     <button onClick={handleAddToCart}>Add to Cart</button>
  </Modal>
};

[phryneas]

Yeah we've had that request a few times, so I'll put it on the list.

[sebastienlabine]

is there a workaround right now to reset the mutation state?

[phryneas]

Triggering a new mutation. Otherwise you'll just have to track that as a local state variable yourself in some way.

[markerikson]

Available in the 1.7 betas.