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 :

<code class="language-bash">npm install @tanstack/react-query</code>

ou

<code class="language-bash">yarn add @tanstack/react-query</code>

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

<code class="language-bash">npm install @tanstack/react-query-devtools</code>

Paramètres

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

<code class="language-javascript">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>
  );
}</code>

Utilisation de base avec useQuery

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

<code class="language-javascript">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>
  );
}</code>

Effectuer des mutations avec useMutation

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

<code class="language-javascript">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>
  );
}</code>

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 :

<code class="language-javascript">const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  const json = await response.json();
  return json;
};</code>

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!