Communiquer avec des API

Les approches pour la récupération de données

La communication avec des API externes est une partie cruciale d’une application. L’utilisation de fetch en React, si elle reste triviale, n’est toutefois pas aussi simple qu’en JavaScript vanilla. fetch sera utilisé car il s’agit d’une fonction native, mais les développeurs qui utilisent d’autres utilitaires tels que axios ne devraient avoir aucun mal à réadapter les explications à leur cas particulier. En effet, le plus important n’est pas tant l’utilisation d’une fonctionnalité native ou d’un utilitaire, mais de voir comment ces concepts s’intègrent dans une application React. D’une certaine manière, ce chapitre touche aussi à la gestion plus générale des promesses et de l’asynchrone.

Dans de nombreux cas, cette intégration est identique à celle d’une application JavaScript classique : il suffit de brancher un callback sur un événement (par exemple le onSubmit d’un formulaire), de traiter les données et de les envoyer via fetch. Des états peuvent être stockés via useState<T> pour gérer le temps de chargement et les éventuelles erreurs qui peuvent advenir du côté du serveur d’API.

import { useState, type FormEventHandler } from "react"; 
 
export default function App() { 
  const [isPending, setIsPending] = useState<boolean>(false); 
  const [error, setError] = useState<string>(); 
 
  const onLogin: FormEventHandler<HTMLFormElement> = (e) => { 
    e.preventDefault(); 
    const data = new FormData(e.currentTarget); 
 
    setIsPending(true); 
    fetch("/api/login", { 
      method: "POST", 
      body: JSON.stringify(data), 
    })
    .catch((error) => setError(error.message)) 
    .finally(() => setIsPending(false)); 
  }; 
 
  return ( 
    <div> 
      {Boolean(error)...

La gestion d’états automatique avec Tanstack Query

Tout ce qui a été étudié avec la méthode render-as-you-fetch est à la base des bibliothèques de gestion des requêtes utilisées dans de nombreuses applications professionnelles en React. Ce détour paraît d’autant plus important que tous les projets professionnels soit n’utilisent pas de bibliothèque externe pour gérer les requêtes, soit n’utilisent pas tous la même bibliothèque. Il existe toutefois une bibliothèque largement plus utilisée que les autres : la Tanstack Query (aussi communément appelée React Query). Sa principale fonction n’est pas l’automatisation de la récupération des données (qui est laissée au choix du développeur), mais la gestion automatique des promesses. Elle fournit des outils pour synchroniser les composants d’une application React avec l’état de promesses, en encapsulant pour le développeur tous les aspects les plus complexes (incluant ceux étudiés plus en amont).

Ces aspects complexes couvrent pêle-mêle le caching, la mise à jour des données (refetch), la déduplication des appels API, et d’autres aspects qui n’ont pas été traités plus en amont tels que la pagination ou le chargement infini des données (très utilisé lors des actions de scrolling sur les réseaux sociaux par exemple).

Pour télécharger Tanstack Query, lançons la commande suivante dans le dossier du projet :

npm install @tanstack/react-query 

Avant toute utilisation, Tanstack Query requiert un minimum de configuration. Pour fonctionner, la bibliothèque a besoin d’une instance de classe QueryClient. Elle contient l’état global des promesses (erreurs, chargement, état de réussite, etc.) et gère également le cache des requêtes (implémenté de manière minimale dans l’approche render-as-you-fetch). C’est également en paramètre du constructeur QueryClient qu’il est possible de configurer certains paramètres relatifs à la gestion des requêtes (nombre de tentatives avant abandon, durée...