Seamless interactivity: optimistic updates in GraphQL and React

Typical situation: you are sitting on the train on a business trip and using a web application. The internet connection is always bad or completely down. The application is unusable, loading icons everywhere. Once you click “Save”, you have to wait for minutes. Working properly is no longer an option.

Advertisement

But even if the Internet is generally very slow in a rural area, adding an item to a shopping cart can take several seconds. Web developers can solve these problems very easily: optimistic updates, such as those possible with GraphQL and React, allow for seamless interactivity regardless of Internet speed.

Jonas Hermannsdörfer is a freelance software developer specializing in web development with React and TypeScript. He shares his knowledge as a React trainer and speaker, among other things.

Old mobiles | These old cell phones sell for thousands of euros: check if you have any at home

Anticipated API response

Optimistic updates are a pattern of simulating the results of a mutation (update) and updating the user interface even before a response is received from the server. Once the response is received, the React JavaScript library removes the optimistic update result and replaces it with the actual result. Optimistic updates provide an easy way to reduce user interface (UI) response time while ensuring that the data matches the actual response when it arrives.

For example, if you want to add an item to a shopping cart, a typical update with React would address an API, tell it which item should be added to the shopping cart, wait for the API to respond, and then add all items that are in the shopping cart display UI.

An optimistic update would proceed differently: when someone adds an item to the cart, React will call an API and tell it which item was added to the cart and immediately display which items are in the cart. Once the API provides a response, someone would overwrite the previously submitted optimistic result with the API’s response.

With this approach, users can see all the items in their shopping cart immediately without having to wait for the server to respond, which enables seamless interactions. This is noticeable with both fast and slow internet connections. However, the difference is greater with slow internet connections. If the API’s response is incorrect, the result of the optimistic update should no longer be visible, but rather the state that existed before the optimistic update. It also makes sense to provide users with an error message and an option to try the update again.

Implementation of optimistic updates using the GitHub API as an example

The following is about implementing an optimistic update using the Apollo Client library using the React JavaScript library and the GitHub API. Apollo Client JavaScript is a state management library for front-end applications that makes it easy to query data from a GraphQL API and manage that queried data locally. This makes implementing optimistic updates particularly easy. Optimistic updates are also possible with similar libraries such as REST APIs with URLs or Tanstack Query. React is a JavaScript library for developing user interfaces on the web. In addition to the React UI library, other UI libraries such as Angular, Vue, Svelte or Solid can also be used.

In the example, the goal is to add or remove a star from a GitHub repository and to display and update the number of stars in the repository when a user adds or removes a star.

If you want to test the whole code yourself, Find it on GitHub,