Editions ENI Livres | Vidéos | e-Formations
Gestion du state serveur avec React Query
Introduction
React Query est une bibliothèque qui facilite la gestion des données côté client dans les applications React. Elle offre des fonctionnalités puissantes pour gérer le state et la mise en cache des données provenant de serveurs.
Cependant, il convient de préciser que React Query ne se concentre pas sur le state global d’une application (comme le fait Redux ou Context API), mais se concentre principalement sur le state lié aux données distantes (appels serveur, mise en cache, synchronisation, etc.).
Installation
1. Installer les dépendances
Tout d’abord, créez un nouveau projet avec Vite puis installez les packages nécessaires à l’aide de votre gestionnaire de paquets préféré, comme npm ou yarn :
npm install @tanstack/react-query Ceci installera la dernière version stable de React Query, à ; savoir la version 4 au moment de l’écriture de ce chapitre.
Il est aussi recommandé d’installer en tant que dépendance de développement le plug-in ESLint dédié qui permettra de voir plus vite les éventuels bogues que nous pourrions rencontrer lors de l’utilisation de React Query :
npm i -D @tanstack/eslint-plugin-query 2. Mise en place du provider
Enveloppez votre application avec le composant QueryClientProvider qui fournit le contexte pour React Query en passant le queryClient aux enfants. De cette manière, tous les composants pourront utiliser les fonctionnalités de React Query.
import './App.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<p className="read-the-docs">
Hello...Requêtes (queries)
1. La fonction de fetch
Maintenant que tout est installé et configuré, il va falloir écrire le code qui se charge d’appeler effectivement une API. Nous allons donc écrire une fonction qui devra renvoyer les données ou alors lever une exception si une erreur se produit. L’idéal est de créer un nouveau fichier, depuis lequel nous allons exporter cette fonction chargée de récupérer les données. Ces fonctions sont parfois appelées fetchers dans le contexte de React Query.
const fetchTodo = async ({ queryKey }) => {
const id = queryKey[1];
const apiRes = await fetch(`https://jsonplaceholder.
typicode.com/todos/${id}`);
if (!apiRes.ok) {
throw new Error(`Le fetch n'a pas fonctionné`);
}
return apiRes.json();
};
export default fetchTodo; La fonction fetchTodo est celle qui effectuera réellement l’appel à l’API. En la dissociant, elle peut être testée indépendamment et réutilisée dans notre application. Le paramètre passé en entrée queryKey est toujours un tableau qui permet d’identifier la requête. Ce concept de queryKey est important, car React Query...
Mutations
Les mutations sont un autre aspect important de React Query. Elles vous permettent d’effectuer des opérations de modification sur les données côté client et côté serveur de manière optimiste et réactive. Il s’agit globalement du même procédé que pour une requête, sauf que dans ce cas, nous allons souvent utiliser une requête POST avec des données.
Création d’une mutation
React Query exporte un hook appelé useMutation, qui est utilisé pour effectuer des mutations. Voici un exemple basique :
function App() {
const mutation = useMutation({
mutationFn: (newTodo) => {
// Ici, l'url pour POST un nouveau todo
return fetch('/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newTodo)
}).then(res => res.json());
}
});
return (
<button onClick={() => mutation.mutate({...Invalidation
L’invalidation des données est un concept-clé dans React Query. C’est l’une des manières dont React Query maintient vos données à jour et garantit que les utilisateurs voient toujours les informations les plus récentes. L’invalidation n’est pas la simple suppression des données, c’est plutôt un signal pour React Query qu’une requête spécifique doit être réexécutée la prochaine fois qu’elle est nécessaire.
Pourquoi est-ce nécessaire ? Imaginez une application de gestion de liste de tâches. Lorsqu’un utilisateur ajoute une nouvelle tâche, les données côté serveur sont mises à jour, mais les données actuellement en cache sur le client ne reflètent pas ce changement. Si l’utilisateur consulte la liste des tâches, il est possible qu’il ne voie pas la nouvelle tâche, car les données proviennent du cache. C’est là que l’invalidation entre en jeu.
1. Différents moyens d’invalider une requête
Avec React Query, nous pouvons invalider une requête spécifique en utilisant le queryClient. Lorsqu’une requête est invalidée, cela signifie que React Query sait que ses données pourraient ne plus être à jour.
La prochaine fois que cette requête...
Utiliser les outils de développement dédiés
React Query propose des outils de développement dédiés qui facilitent le suivi et le débogage de l’état du cache, des requêtes et des mutations. Ces outils nous permettent de mieux comprendre ce qu’il se passe en coulisse. La première étape est d’installer le package :
npm i @tanstack/react-query-devtools Ensuite, il suffira de l’importer et faire apparaître le composant dans le composant principal :
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
function App() {
return (
<QueryClientProvider client={queryClient}>
{/* Le reste de notre application */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
} Le composant ReactQueryDevtools accepte de nombreuses options listées dans la documentation de React Query. Ici, nous avons désactivé l’ouverture des DevTools au lancement en mettant le initialIsOpen à false.
Utilisation des outils de développement
Une fois l’extension installée et activée, vous verrez une icône avec le logo de React Query ;...
