How can I implement optimistic UI with Apollo Client?

How can I implement optimistic UI with Apollo Client?

To implement optimistic UI with Apollo Client, you can use the optimisticResponse option in your mutation. This allows you to immediately update the UI before the server response.

Can you give me a code example of how to set that up?

Sure! Here's a simple example:

const [addTodo] = useMutation(ADD_TODO, {
  optimisticResponse: {
    addTodo: {
      id: -1,
      text: newTodoText,
      __typename: 'Todo',
    },
  },
  update: (cache, { data: { addTodo } }) => {
    const data = cache.readQuery({ query: GET_TODOS });
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: [...data.todos, addTodo] },
    });
  },
});

What happens if the mutation fails?

If the mutation fails, Apollo Client will automatically revert the optimistic update, and your UI will reflect the previous state.