The Startup
Published in

The Startup

How to Use Optimistic UI in React and Apollo GraphQL

Improve the user experience and responsiveness of your React applications with optimism !

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.

Originally published at https://romainamichaud.com.

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

How To Solve Cyclic Rotation

MVC Implemented by React and Causality-Redux

SVG: The Hard Parts — II

Building a work phone with Node.js, Apex, Twilio & AWS

splice() mutable JavaScript

Scrolling to an Anchor in React When Your Elements Are Rendered Asynchronously

Two methods of declaring modules in Angular

Why Webpack? What problem does it solve?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amichaud Romain

Amichaud Romain

French independant developer.

More from Medium

Chopping a monorepo. From Heroku to Heroku and Next.js

How to Implement Invisible Captcha with Next.js in 2022

File System Based Routing in Next JS

State management in React with MobX