Installation et utilisation de TanStack Query (anciennement React Query)

Introduction à la requête TanStack

TanStack Query (anciennement React Query) est une bibliothèque puissante permettant de gérer l'état des demandes de données dans les applications React. Simplifie le processus de récupération, de mise en cache, de synchronisation et de mise à jour efficace des données.

Installation

Pour intégrer TanStack Query dans votre projet React, utilisez npm ou Yarn :

npm install @tanstack/react-query

ou

yarn add @tanstack/react-query

Pour utiliser les outils de développement (DevTools), installez :

npm install @tanstack/react-query-devtools

Paramètres

Enveloppez votre application avec QueryClientProvider pour gérer les demandes de données :

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
      {/* Opcional: Si instalaste DevTools */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

Utilisation de base avec useQuery

Le hook useQuery permet d'obtenir facilement des données depuis une API :

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

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

function MyComponent() {
  const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData });

  if (isLoading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

Effectuer des mutations avec useMutation

Pour effectuer des opérations telles que POST, PUT ou DELETE, utilisez useMutation :

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

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

function CreatePost() {
  const mutation = useMutation(createPost);

  return (
    <button onClick={() => mutation.mutate({ title: 'Nuevo Post', body: 'Contenido del post' })}>
      Crear Post
    </button>
  );
}

L'importance de Fetcher dans la requête TanStack

TanStack Query a besoin d'un fetcher (une fonction qui fait la requête à la source de données) pour obtenir des informations externes. Le récupérateur agit comme un intermédiaire, offrant de la flexibilité et gardant le code propre. Vous pouvez le personnaliser en fonction de votre API.

Qu'est-ce qu'un récupérateur ?

Un récupérateur est une fonction qui :

1. Reçoit les paramètres (options de requête, etc.).
2. Faire la demande (en utilisant fetch, axios, etc.).
3. Renvoie une promesse avec les données ou une erreur.

Exemple de récupération :

const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  const json = await response.json();
  return json;
};

Conclusion

TanStack Query optimise la gestion des données dans React, améliorant les performances grâce à son système de mise en cache et de revalidation. À bientôt! ?

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!