Maîtriser les requêtes TanStack : un guide complet pour une récupération efficace des données dans React

Dans le développement React moderne, une récupération efficace des données et une gestion de l'état sont cruciales pour créer des applications réactives et performantes. Bien que les outils traditionnels tels que useEffect et useState puissent gérer la récupération de données, ils aboutissent souvent à un code complexe et difficile à maintenir, en particulier à mesure que votre application se développe. Entrez TanStack Query (anciennement connu sous le nom de React Query), une bibliothèque puissante qui simplifie la récupération de données, la mise en cache, la synchronisation et bien plus encore.

Dans cet article, nous approfondirons ce qu'est TanStack Query, pourquoi vous devriez envisager de l'utiliser et comment l'implémenter dans vos applications React.

Qu'est-ce que la requête TanStack ?

TanStack Query est une bibliothèque de récupération de données sans tête pour React et d'autres frameworks. Il fournit des outils pour récupérer, mettre en cache, synchroniser et mettre à jour l'état du serveur dans votre application sans avoir besoin d'un code complexe et souvent redondant.

Principales caractéristiques :

• Mise en cache des données : met automatiquement en cache les données et les réutilise jusqu'à ce qu'elles deviennent obsolètes.
• Récupération automatique : récupère automatiquement les données en arrière-plan pour maintenir votre interface utilisateur à jour.
• Mises à jour optimistes : fournit des mécanismes pour les mises à jour optimistes, garantissant une interface utilisateur réactive.
• Rendu côté serveur : prend facilement en charge le rendu côté serveur.
• Outils de développement prêts à l'emploi : inclut des outils de développement pour le débogage et la surveillance des requêtes.

Pourquoi utiliser la requête TanStack ?

L'utilisation de TanStack Query peut considérablement simplifier la logique de récupération de données dans vos applications React. Voici quelques raisons de l'envisager :

• Réduit le code Boilerplate : la récupération de données à l'aide de useEffect nécessite la gestion des états de chargement, la gestion des erreurs et la nouvelle récupération. TanStack Query résume ces préoccupations, vous permettant de vous concentrer sur la fonctionnalité de base.

• Améliore les performances : grâce à la mise en cache, à la récupération en arrière-plan et à la déduplication, TanStack Query contribue à améliorer les performances des applications en réduisant les requêtes réseau inutiles.

• Gère des scénarios complexes : qu'il s'agisse de pagination, de défilement infini ou de gestion de données obsolètes, TanStack Query fournit des solutions robustes pour les besoins complexes de récupération de données.

Comment utiliser la requête TanStack dans une application React

Examinons la configuration de TanStack Query dans un projet React et son utilisation pour récupérer des données à partir d'une API.

Étape 1 : Installation

Tout d'abord, installez les packages nécessaires :

npm install @tanstack/react-query

Si vous utilisez TypeScript, vous souhaiterez également installer les types :

npm install @tanstack/react-query @types/react

Étape 2 : configuration du client de requête

Avant d'utiliser TanStack Query dans votre application, vous devez configurer un QueryClient et envelopper votre application avec le QueryClientProvider.

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Create a client
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Étape 3 : Récupérer des données avec useQuery

Pour récupérer des données, TanStack Query fournit le hook useQuery. Ce hook prend une clé de requête et une fonction qui renvoie une promesse (généralement un appel API).

Voici un exemple de récupération de données à partir d'une API :

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  const { data, error, isLoading } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading posts</div>;

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

Étape 4 : Gestion des états de requête

TanStack Query facilite la gestion des différents états de votre requête, tels que le chargement, l'erreur ou la réussite. Vous pouvez utiliser isLoading, isError, isSuccess et d'autres propriétés fournies par useQuery pour contrôler ce qui est rendu en fonction de l'état de la requête.

const { data, error, isLoading, isSuccess, isError } = useQuery(['posts'], fetchPosts);

if (isLoading) {
  return <div>Loading...</div>;
}

if (isError) {
  return <div>Error: {error.message}</div>;
}

if (isSuccess) {
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

Étape 5 : Mises à jour optimistes

Les mises à jour optimistes vous permettent de mettre à jour l'interface utilisateur avant que le serveur ne confirme la mise à jour, offrant ainsi une expérience utilisateur plus rapide. Cela peut être fait en utilisant le hook useMutation dans TanStack Query.

import { useMutation, useQueryClient } from '@tanstack/react-query';

const addPost = async (newPost) => {
  const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
  return data;
};

function AddPost() {
  const queryClient = useQueryClient();

  const mutation = useMutation(addPost, {
    onMutate: async newPost => {
      await queryClient.cancelQueries(['posts']);

      const previousPosts = queryClient.getQueryData(['posts']);

      queryClient.setQueryData(['posts'], old => [...old, newPost]);

      return { previousPosts };
    },
    onError: (err, newPost, context) => {
      queryClient.setQueryData(['posts'], context.previousPosts);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });

  return (
    <button onClick={() => mutation.mutate({ title: 'New Post', body: 'This is a new post.' })}>
      Add Post
    </button>
  );
}

Conclusion

TanStack Query est un outil puissant qui peut améliorer considérablement la façon dont vous gérez l'état côté serveur dans vos applications React. En gérant la récupération des données, la mise en cache, la synchronisation, etc., il vous permet de vous concentrer sur la création de fonctionnalités sans vous enliser dans les complexités de la gestion de l'état.

Que vous construisiez un petit projet ou une application à grande échelle, l'intégration de TanStack Query peut conduire à un code plus propre et plus maintenable et à une meilleure expérience utilisateur. Avec des fonctionnalités telles que la récupération automatique, la mise en cache et les mises à jour optimistes, TanStack Query est un outil indispensable pour les développeurs React modernes.

Essayez TanStack Query dans votre prochain projet et découvrez l'efficacité et la simplicité qu'il apporte à la récupération de données dans React !

Bon codage ?‍?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!