resetError

Description: Manually clear the error state from the global cache and local state.

• How To: Call the resetError function returned by the useMutation hook. This will clear any current error state associated with the mutation in the mutateCache and update the hook's local state.

  const { mutate, error, resetError } = useMutation({
      mutationKey: 'update-settings'
  });
  
  if (error) {
      return (
          <div className="alert-error">
              <p>Failed: {error.message}</p>
              <button onClick={resetError}>Dismiss</button>
          </div>
      );
  }

• Best Practice: Use resetError to allow users to manually dismiss or retry after a failed mutation. This is essential for preventing the user from being stuck in an error state and provides a clear path to recovery.

Deep Dive: How resetError works step by step

Example:

function ActionButton() {
    const { mutate, error, resetError } = useMutation({
        mutationKey: 'global-action'
    });
    
    return (
        <div>
            {error && <ErrorMessage message={error.message} onDismiss={resetError} />}
            <button onClick={() => mutate(action)}>Execute</button>
        </div>
    );
}

What happens step by step when resetError is called:

1. User clicks "Dismiss" → resetError() is called.
2. useMutation calls mutation.resetError() → Interacts with the global DataClient.
3. Global cache entry is updated → The entry for 'global-action' in mutateCache has its error set to null and status set to 'stale'.
4. Subscription system is notified → The DataClient publishes an update for the key 'global-action'.
5. Component is notified → The useSyncExternalStore inside useMutation receives the update.
6. Hook re-renders → The local error variable becomes null, and isError becomes false.
7. UI is updated → The <ErrorMessage /> component is unmounted, and the user can see the original state.

Key insight: resetError is a global command. If multiple components are observing the same mutationKey, calling resetError in one will clear the error and trigger a re-render in all of them. This ensures a consistent error-dismissal experience across the entire application.