How to Use Optimistic UI in React and Apollo GraphQL
By: Amichaud Romain
Tags: User Experience, GraphQL, React, Nodejs, Apollo

How to Use Optimistic UI in React and Apollo GraphQL

Goals

Discover the principle of optimistic UI

Use it with React and GraphQL to increase user experience

Context

The response time between the backend and the frontend is one of the factors limiting the user experience. This is even more true when the application or the website is intended for mobiles which may have a degraded connection.

As soon as a user performs an action to send data to the server, this is called a mutation, the client application waits for the return of the server to update the interface. If the server response time is importantly, the user experience is bad.

Image by Author

A bit of theory

The application manages a list of characters, we want to be able to add characters. The characters have a unique ID, and a Username. The network is very slow.

The user wants to add a character, he must enter his Username and click on a registration button. A mutation is sent to the server which will create the character, generate its ID and return an updated list of characters.

Here is a diagram of the actions, when all goes well :

Image by Author

There could possibly be a problem on the server side, and the creation of the new character may not go as planned. In this case, the diagram might look like this :

Image by Author

The optimistic UI is simply the fact of placing oneself in the event that everything goes as planned: the client ignores this that happens on the server side at first, it assumes that everything is going to be fine. In a second time it retrieves information from the server, updates the properties that were generated by the server (here the ID), and in case of error it returns to the initial state.

Image by Author

For the user, his action is felt to be instantaneous.

Start the project

To put our example into practice, we need a client application (in React), a server (in Node.js), both connected by an API (GraphQL). On the client side, you will need cache or state management, Apollo GraphQL does it perfectly.

We use create-react-app to bootstrap the client application with a basic configuration.

The server is a classic Apollo Graphql server, with express middleware that will simulate a response time of 1.5 seconds:

Client application

Our React component displays a list of characters, we get the list via a GraphQL query. We then pass the list to the compoonent who will display it.

The main component displays the list and a field that allows you to enter the name of the new character :

We add the GraphQL mutation using the useMutation hook provided by Apollo :

The application is functional and allows you to add a character and retrieve the updated list from the server. The list refetch operation takes time and leaves an unpleasant feeling to the user !

Let’s be optimistic !

To add optimistic UI to our application, we just need to change the data refetch strategy when of the mutation. In the previous mutation, a query was passed as a parameter via the “refetchQueries” property, which told GraphQL to re-execute this query after the mutation and update the cache.

To use Apollo’s optimistic UI, you have access to two properties: “optimisticResponse” and “update”.

The first property, “optimisticResponse” manages the entity that we create, here the character, the property “update” defines how to update our local cache with this new entity. This update will take place without the user noticing it, upon receipt of the response from the server.

Here are the two components used, one with Optimistic UI, the other without :

Image by Author

You can find all the sources here.