Error Handling with Mutation

Provide an example of using the useIsMutating hook along with error handling in a form submission scenario, emphasizing on how to revert UI changes in case of mutation failure.

import { useMutation, useQueryClient } from '@tanstack/react-query';

const useFormSubmit = () => {
  const queryClient = useQueryClient();
  const { mutate, isLoading } = useMutation(submitFormData, {
    onSuccess: () => {
      // Invalidate and refetch.
      queryClient.invalidateQueries('formData');
    },
    onError: (error, variables, context) => {
      // Optionally, revert the UI changes.
      alert('Submission failed, please try again.');
    },
  });

  const handleSubmit = (data) => {
    mutate(data);
  };

  return { handleSubmit, isLoading };
};

This code snippet demonstrates how to use the `useMutation` hook from React Query to handle form data submission asynchronously, including success and error handling. It invalidates the query cache on successful submission to ensure data is up-to-date and alerts the user in case of an error.

const { isLoading } = useMutation(submitFormData, {
  onError: (error, variables, { reset }) => {
    // Reset UI changes because of the error
    reset();
  },
});

function MyForm() {
  const resetFormUI = () => {/* Revert any UI changes here */};

  const { handleSubmit } = useFormSubmit(submitFormData, {
    reset: resetFormUI,
  });

  return (
    <form onSubmit={handleSubmit}>
      {/* form elements */}
      <button type="submit" disabled={isLoading}>Submit</button>
    </form>
  );
}

Here we extend the use of `useMutation` for form submission to include a custom `reset` function. This function is called upon encountering an error during the mutation, allowing for UI changes to be reverted. The `MyForm` functional component includes this setup, showing how to disable the submit button while loading and how to integrate the reset logic.