React Query (TanStack Query) : récupération efficace des données et gestion de l'état pour React

React Query (TanStack Query) : une puissante bibliothèque de récupération de données et de gestion d'état pour React

React Query (maintenant appelé TanStack Query) est une bibliothèque de récupération de données et de gestion d'état extrêmement populaire pour les applications React. Il simplifie le travail avec des données distantes en gérant les complexités de la récupération, de la mise en cache, de la synchronisation et de la pagination des données. React Query élimine une grande partie du processus manuel impliqué dans la création de requêtes API, le stockage et la mise à jour des données et la gestion des états de chargement.

TanStack Query aide les développeurs à gérer l'état du serveur dans les applications React avec une configuration minimale, garantissant une expérience utilisateur fluide, en particulier lorsqu'il s'agit d'opérations asynchrones.

---

1. Qu'est-ce que React Query (TanStack Query) ?

React Query est un outil de récupération de données et de gestion de l'état qui aide à simplifier le processus d'interaction avec les données côté serveur dans les applications React. Il résume et gère la récupération, la mise en cache, la synchronisation et la mise à jour en arrière-plan des données.

Il est principalement utilisé pour gérer l'état du serveur, qui fait référence aux données provenant d'un serveur ou d'une API distant, comme les données des API REST, de GraphQL ou de toute autre source de données.

Principales caractéristiques :

• Mise en cache automatique : React Query met automatiquement en cache les données récupérées, ce qui permet une récupération ultérieure plus rapide des données sans requêtes réseau supplémentaires.
• Synchronisation automatique : elle garantit que vos données restent synchronisées entre le client et le serveur, même lorsque l'utilisateur bascule entre les pages ou revisite l'application.
• Récupération en arrière-plan : React Query peut récupérer automatiquement les données en arrière-plan pour garantir que l'utilisateur dispose toujours des données les plus à jour.
• Interrogation et pagination : React Query prend en charge l'interrogation et la pagination dès le départ, ce qui simplifie ces tâches courantes.

---

2. Concepts de base de React Query

1. Requêtes

Les requêtes dans React Query sont utilisées pour récupérer des données à partir d'un serveur (ou de toute source de données externe). Une requête est identifiée par une clé unique, que React Query utilise pour mettre en cache et suivre les données.

Exemple :

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

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

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

• Le hook useQuery récupère les données à l'aide de la fonction fetchPosts. La chaîne posts est la clé unique et React Query mettra en cache les données récupérées sous cette clé.

2. Mutations

Les mutations sont utilisées pour modifier ou créer des données sur le serveur (par exemple, requêtes POST, PUT, DELETE). Comme les requêtes, les mutations peuvent être suivies et mettre automatiquement à jour votre état après une mutation réussie.

Exemple :

import { useMutation } from 'react-query';

function createPost(postData) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify(postData),
    headers: { 'Content-Type': 'application/json' },
  }).then((response) => response.json());
}

const NewPost = () => {
  const mutation = useMutation(createPost);

  const handleCreatePost = async () => {
    await mutation.mutate({ title: 'New Post', body: 'This is a new post' });
  };

  return (
    <div>
      <button onClick={handleCreatePost}>Create Post</button>
      {mutation.isLoading ? <p>Creating post...</p> : null}
      {mutation.isError ? <p>Error creating post</p> : null}
      {mutation.isSuccess ? <p>Post created!</p> : null}
    </div>
  );
};

• Le hook useMutation est utilisé pour des opérations telles que la création, la mise à jour ou la suppression de données.

3. Mise en cache

React Query met automatiquement en cache les résultats des requêtes. Cette mise en cache permet un rendu plus rapide et évite de faire des requêtes en double au serveur. Les données mises en cache sont automatiquement mises à jour lorsqu'une requête est récupérée.

Vous pouvez personnaliser le comportement de la mise en cache en fonction des besoins de votre application, comme définir une durée de cache ou spécifier une heure d'expiration (l'heure après laquelle les données mises en cache sont considérées comme obsolètes).

Exemple :

const { data } = useQuery('posts', fetchPosts, {
  staleTime: 1000 * 60 * 5, // Cache is fresh for 5 minutes
  cacheTime: 1000 * 60 * 30, // Cache persists for 30 minutes
});

4. Pagination

React Query fournit une prise en charge intégrée de la pagination. Vous pouvez récupérer des données paginées avec des paramètres de page et de limite personnalisés, et les réponses seront mises en cache de manière appropriée.

Exemple :

const fetchPage = (page) => fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`)
  .then((res) => res.json());

const PaginatedPosts = () => {
  const [page, setPage] = React.useState(1);
  const { data, isLoading, isError } = useQuery(['posts', page], () => fetchPage(page));

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return (
    <div>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={() => setPage((prev) => prev - 1)} disabled={page === 1}>
        Previous
      </button>
      <button onClick={() => setPage((prev) => prev + 1)}>Next</button>
    </div>
  );
};

• Le hook useQuery est utilisé avec une clé de tableau (['posts', page]) pour récupérer des données paginées.

---

3. Installation et configuration de React Query (TanStack Query)

Pour utiliser React Query, vous devrez installer React-Query (TanStack Query) :

npm install react-query

1. Configuration du fournisseur de requêtes React

Pour activer React Query dans votre application, vous devez envelopper votre composant racine dans QueryClientProvider pour fournir le contexte nécessaire à l'ensemble de l'application.

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <YourApp />
  </QueryClientProvider>
);

• QueryClient est l'objet principal de React Query. Il gère toutes les requêtes et mutations dans votre application.

---

4. Fonctionnalités avancées de React Query

1. Pagination et requête infinie

React Query prend en charge la pagination et le défilement infini avec useInfiniteQuery, vous permettant de gérer des listes et une pagination infinies.

Exemple :

import { useInfiniteQuery } from 'react-query';

function fetchPostsPage({ pageParam = 1 }) {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam}`)
    .then((res) => res.json());
}

const InfinitePosts = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetchingNextPage,
  } = useInfiniteQuery('posts', fetchPostsPage, {
    getNextPageParam: (lastPage, allPages) => lastPage.length === 10 ? allPages.length + 1 : false,
  });

  return (
    <div>
      {isLoading ? <div>Loading...</div> : null}
      {data?.pages.map((page, i) => (
        <div key={i}>
          {page.map((post) => (
            <p key={post.id}>{post.title}</p>
          ))}
        </div>
      ))}
      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
        {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'No more posts'}
      </button>
    </div>
  );
};

2. Invalidations de requêtes

Vous pouvez invalider une requête manuellement en utilisant queryClient.invalidateQueries. Cela force une nouvelle récupération des données pour la clé de requête spécifiée.

Exemple :

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

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

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

• Cela garantit qu'après la création d'une nouvelle publication, la liste des publications est automatiquement récupérée.

---

5. Avantages de l'utilisation de React Query

1. Récupération de données simplifiée

React Query réduit le passe-partout pour la gestion des états de chargement, de réussite et d'erreur, ce qui rend la récupération des données plus facile et plus déclarative.

2. Mise en cache automatique

Les données récupérées sont mises en cache par défaut, ce qui réduit les requêtes réseau inutiles et accélère votre application.

3. Mises à jour en arrière-plan

React Query fournit une récupération de données en arrière-plan, garantissant que les données de votre application restent à jour même lorsqu'elles ne sont pas explicitement récupérées.

4. Pagination intégrée et requêtes infinies

La gestion de la pagination et du défilement infini est simple et efficace grâce aux hooks intégrés de React Query.

5. DevTools pour le débogage

React Query fournit une excellente interface DevTools pour inspecter les requêtes, les mutations et leurs états en temps réel.

---

**6. Conclusion

**

React Query (TanStack Query) fournit un moyen efficace et évolutif de gérer la récupération de données et la gestion de l'état dans les applications React. Grâce à la mise en cache intégrée, à la récupération en arrière-plan, à la pagination et à la gestion des erreurs, React Query facilite et transparente l'interaction avec les données côté serveur.

---

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!