Installation und Verwendung von TanStack -Abfrage (früher React -Abfrage)

Einführung in TanStack Query

TanStack Query (ehemals React Query) ist eine leistungsstarke Bibliothek zum Verwalten des Status von Datenanfragen in React-Anwendungen. Vereinfacht den Prozess des effizienten Abrufens, Zwischenspeicherns, Synchronisierens und Aktualisierens von Daten.

Installation

Um TanStack Query in Ihr React-Projekt zu integrieren, verwenden Sie npm oder Yarn:

npm install @tanstack/react-query

oder

yarn add @tanstack/react-query

Um die Entwicklungstools (DevTools) zu verwenden, installieren Sie:

npm install @tanstack/react-query-devtools

Einstellungen

Umschließen Sie Ihre App mit QueryClientProvider, um Datenanfragen zu verwalten:

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>
  );
}

Grundlegende Verwendung mit useQuery

Der useQuery-Hook erleichtert das Abrufen von Daten von einer 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 id="data-title">{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

Mutationen durchführen mit useMutation

Um Vorgänge wie POST, PUT oder DELETE auszuführen, verwenden Sie 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>
  );
}

Die Bedeutung von Fetcher in TanStack Query

TanStack Query benötigt einen Fetcher (eine Funktion, die die Anfrage an die Datenquelle stellt), um externe Informationen zu erhalten. Der Abrufer fungiert als Vermittler, sorgt für Flexibilität und hält den Code sauber. Sie können es an Ihre API anpassen.

Was ist ein Fetcher?

Ein Fetcher ist eine Funktion, die:

1. Empfängt Parameter (Anfrageoptionen usw.).
2. Stellen Sie die Anfrage (mit fetch, axios usw.).
3. Gibt ein Versprechen mit den Daten oder einen Fehler zurück.

Fetcher-Beispiel:

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

Fazit

TanStack Query optimiert die Datenverwaltung in React und verbessert die Leistung mit seinem Caching- und Revalidierungssystem. Bis bald! ?

Das obige ist der detaillierte Inhalt vonInstallation und Verwendung von TanStack -Abfrage (früher React -Abfrage). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!