React: How to implement optimistic UI with React Query?

1import { useMutation, useQueryClient } from "@tanstack/react-query";
2
3function TodoList({ todos }) {
4  const queryClient = useQueryClient();
5
6  const addTodoMutation = useMutation({
7    mutationFn: (newTodo) => api.addTodo(newTodo),
8    onMutate: async (newTodo) => {
9      // Cancel outgoing refetches
10      await queryClient.cancelQueries({ queryKey: ["todos"] });
11
12      // Snapshot previous value
13      const previousTodos = queryClient.getQueryData(["todos"]);
14
15      // Optimistically update
16      queryClient.setQueryData(["todos"], (old) => [
17        ...old,
18        { id: Date.now(), text: newTodo.text, done: false },
19      ]);
20
21      return { previousTodos };
22    },
23    onError: (err, newTodo, context) => {
24      // Rollback on error
25      queryClient.setQueryData(["todos"], context.previousTodos);
26    },
27    onSettled: () => {
28      // Refetch to sync with server
29      queryClient.invalidateQueries({ queryKey: ["todos"] });
30    },
31  });
32
33  return (
34    <div>
35      {todos.map(todo => (
36        <div key={todo.id}>{todo.text}</div>
37      ))}
38      <button onClick={() => addTodoMutation.mutate({ text: "New Todo" })}>
39        Add
40      </button>
41    </div>
42  );
43}