Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. React
  3. Gestion du state serveur avec React Query
Extrait - React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition)
Extraits du livre
React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition) Revenir à la page d'achat du livre

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 ;...