Utiliser l’Optimistic UI avec React et Apollo GraphQL

Améliorez l’expérience utilisateur et la réactivité de vos applications React avec un peu d’optimisme !

Objectifs

  • L’utiliser avec React et GraphQL pour augmenter l’expérience utilisateur

Contexte

Dès qu’un utilisateur effectue une action d’envoi de données au serveur, ce qu’on appelle une mutation, l’application cliente attend le retour du serveur pour mettre à jour l’interface. Si le temps de réponse du serveur est important, l’expérience utilisateur est mauvaise.

Image de l’auteur

Un peu de théorie

L’utilisateur veut ajouter un personnage, il doit pour cela saisir son Username et cliquer sur un bouton d’enregistrement. Une mutation est envoyé au serveur qui va créer le personnage, générer son ID et renvoyer une liste de personnages à jour.

Voici un schema des actions, lorsque tout se passe bien :

Image de l’auteur

Il pourrait éventuellement y avoir un souci côté serveur, et la création du nouveau personnage peut ne pas se dérouler comme prévu. Dans ce cas, le schéma pourrait ressembler à cela :

Image de l’auteur

L’optimistic UI est simplement le fait de se placer dans le cas ou tout se déroule comme prévu : le client ignore ce qui se passe côté serveur dans un premier temps, il part du principe que tout va bien se passer. Dans un second temps il récupère les informations du serveur, met à jour les propriétés qui ont été générés par le serveur (ici l’ID), et en cas d’erreur il revient à l’état initial.

Image de l’auteur

Pour l’utilisateur, son action est ressentie comme étant instantanée.

Lancement du projet

On utilise create-react-app pour bootstraper l’application cliente avec une configuration de base.

Le serveur est un serveur Apollo Graphql classique, avec un middleware express qui va simuler un temps de réponse de 1.5 secondes :

L’application cliente

Le component principal affiche la liste et un champ qui permet de saisir le nom du nouveau personnage :

On ajoute la mutation GraphQL grâce au hook useMutation fourni par Apollo :

L’application est fonctionnelle et permet d’ajouter un personnage et de récupérer la liste à jour provenant du serveur. L’opération de refetch de la liste prend du temps et laisse une sensation désagréable à l’utilisateur !

Soyons optimiste !

Pour utiliser l’optimistic UI d’Apollo, on a accès à deux propriétés : “optimisticResponse” et “update”.

La première propriété, “optimisticResponse” gère l’entité que l’on créé, ici le personnage, la propriété “update” définit comment mettre à jour notre cache local avec cette nouvelle entité. Cette mise à jour s’effectuera sans que l’utilisateur le perçoive, dès réception de la réponse du serveur.

Voici les deux components utilisés l’un avec Optimistic UI, l’autre sans :

Vous pouvez retrouver toutes les sources ici.

Originally published at https://romainamichaud.com.

French independant developer.

French independant developer.