Optimistic update avec React Query
Fini les loaders et les temps de chargement.
Introduction
Les mises à jour optimistes sont une technique permettant d'améliorer l'expérience utilisateur dans les applications web en devançant les réponses du serveur. Plutôt que d'attendre la confirmation du serveur pour mettre à jour l'interface utilisateur, les mises à jour optimistes permettent de refléter immédiatement les changements présumés. Si le serveur confirme la modification, tout va bien. Cependant, si le serveur rejette la demande, l'interface utilisateur revient à l'état précédent.
Dans cet article, nous verrons comment implémenter des mises à jour optimistes en utilisant @tanstack/react-query, une bibliothèque populaire de gestion des requêtes en React.
Prérequis
Assurez-vous d'avoir une application React configurée avec @tanstack/react-query. Si ce n'est pas le cas, vous pouvez l'installer en utilisant npm ou yarn :
Exemple de Code
Nous allons examiner l'exemple d'application d'une liste de tâches (To-Do List) pour illustrer les mises à jour optimistes.
Configuration de base avec React Query
Commençons par configurer React Query dans notre application :
Implémentation d'une Liste de Tâches
Ensuite, nous allons implémenter une liste de tâches avec des fonctionnalités de mise à jour optimiste.
Fetcher pour récupérer les tâches
Composant Liste de Tâches
Explication
- Récupération des Données: Nous utilisons useQuery pour récupérer la liste des tâches avec la clé de requête ['todos'].
- Mutation: La fonction de mise à jour utilise useMutation pour mettre à jour une tâche.
- Mise à Jour Optimiste:
- onMutate: Avant que la mutation ne démarre, nous annulons les requêtes en cours pour ['todos'], sauvegardons l'état précédent, puis mettons à jour la tâche de manière optimiste.
- onError: En cas d'erreur, nous rétablissons l'état précédent à l'aide des données sauvegardées.
- onSettled: Qu'il y ait une erreur ou non, nous invalidons les requêtes ['todos'] pour synchroniser l'interface utilisateur avec les données du serveur.
Les mises à jour optimistes améliorent significativement l'expérience utilisateur en rendant l'application plus réactive et en réduisant les temps de latence perçus.
Conclusion
N'hésitez pas à adapter ces exemples à vos propres besoins et à explorer plus en profondeur les fonctionnalités offertes par React Query.