Apollo Client Optimistic UI in React

We’ve covered the basics, so now it’s time to move to the advanced topics. One of those topics is the optimistic UI with React Apollo, which makes everything onscreen more synchronous.

What is Optimistic UI?

For instance, when liking a post on Twitter, the like appears immediately. As developers, we know there is a request that sends that “like” information to the Twitter backend. This request is asynchronous and does not resolve immediately with a result. The optimistic UI immediately assumes a successful request and mimics the result of such request for the frontend so it can update its UI immediately before the real response arrives later. With a failed request, the optimistic UI performs a rollback and updates itself accordingly. Optimistic UI improves the user experience by omitting inconvenient feedback (e.g. loading indicators) for the user. The good thing is that the React Apollo comes with this feature out of the box.

In this lesson, we will implement an optimistic UI for the situation when a user clicks the watch/unwatch mutation we have implemented.

First, let’s have a look at the mutation: