Rollback optimistic update on mutation error

Show how to revert optimistic updates when a mutation fails by using the onError callback within the useMutation hook.
const { mutate } = useMutation(updateTodo, {
  onMutate: async (todo) => {
    // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
    await queryClient.cancelQueries('todos');
    // Snapshot the previous value
    const previousTodos = queryClient.getQueryData('todos');
    // Optimistically update to the new value
    queryClient.setQueryData('todos', old => => === ? { ...t, ...todo } : t));
    // Return a context with the previous and new todo for potential rollback
    return { previousTodos };
  onError: (err, todo, context) => {
    // Rollback to the previous value
    queryClient.setQueryData('todos', context.previousTodos);
  onSettled: () => {
    // Refetch after success or failure
This code snippet shows how to implement an optimistic update with a rollback on error using React Query's useMutation hook. When the `updateTodo` mutation is initiated, `onMutate` snaps a picture of the current todos and optimistically updates the UI. If the mutation encounters an error, `onError` rolls back the UI to its previous state using the snapshot taken earlier. Finally, `onSettled` ensures that the data is refetched from the server regardless of the mutation's outcome.