Beherrschen von TanStack-Abfragen: Ein umfassender Leitfaden zum effizienten Datenabruf in React

In der modernen React-Entwicklung sind effizientes Datenabrufen und Statusmanagement von entscheidender Bedeutung für die Erstellung reaktionsfähiger und leistungsstarker Anwendungen. Herkömmliche Tools wie useEffect und useState können zwar den Datenabruf übernehmen, sie führen jedoch häufig zu komplexem und schwer zu wartendem Code, insbesondere wenn Ihre Anwendung wächst. Geben Sie TanStack Query (früher bekannt als React Query) ein, eine leistungsstarke Bibliothek, die das Abrufen, Zwischenspeichern, Synchronisieren und mehr von Daten vereinfacht.

In diesem Beitrag gehen wir eingehend darauf ein, was TanStack Query ist, warum Sie die Verwendung in Betracht ziehen sollten und wie Sie es in Ihren React-Anwendungen implementieren.

---

Was ist TanStack Query?

TanStack Query ist eine Headless-Datenabrufbibliothek für React und andere Frameworks. Es bietet Tools zum Abrufen, Zwischenspeichern, Synchronisieren und Aktualisieren des Serverstatus in Ihrer Anwendung, ohne dass komplexer und oft redundanter Code erforderlich ist.

Hauptmerkmale:

• Daten-Caching: Speichert Daten automatisch zwischen und verwendet sie wieder, bis sie veraltet sind.
• Automatisches erneutes Abrufen: Ruft Daten automatisch im Hintergrund erneut ab, um Ihre Benutzeroberfläche auf dem neuesten Stand zu halten.
• Optimistische Updates: Bietet Mechanismen für optimistische Updates und gewährleistet eine reaktionsfähige Benutzeroberfläche.
• Serverseitiges Rendering: Unterstützt problemlos serverseitiges Rendering.
• Out-of-the-Box-Devtools: Enthält Devtools zum Debuggen und Überwachen von Abfragen.

Warum TanStack Query verwenden?

Die Verwendung von TanStack Query kann die Datenabruflogik in Ihren React-Anwendungen drastisch vereinfachen. Hier sind einige Gründe, darüber nachzudenken:

• Reduziert den Boilerplate-Code: Das Abrufen von Daten mit useEffect erfordert die Verwaltung von Ladezuständen, die Fehlerbehandlung und das erneute Abrufen. TanStack Query abstrahiert diese Bedenken, sodass Sie sich auf die Kernfunktionalität konzentrieren können.

• Verbessert die Leistung: Mit Caching, erneutem Abrufen im Hintergrund und Deduplizierung trägt TanStack Query dazu bei, die Anwendungsleistung zu verbessern, indem unnötige Netzwerkanfragen reduziert werden.

• Bewältigt komplexe Szenarien: Ob Paginierung, unendliches Scrollen oder Umgang mit veralteten Daten, TanStack Query bietet robuste Lösungen für komplexe Datenabrufanforderungen.

So verwenden Sie TanStack Query in einer React-Anwendung

Lassen Sie uns durch die Einrichtung von TanStack Query in einem React-Projekt und dessen Verwendung zum Abrufen von Daten von einer API gehen.

Schritt 1: Installation

Installieren Sie zunächst die erforderlichen Pakete:

npm install @tanstack/react-query

Wenn Sie TypeScript verwenden, sollten Sie auch die folgenden Typen installieren:

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

Schritt 2: Einrichten des Abfrage-Clients

Bevor Sie TanStack Query in Ihrer Anwendung verwenden, müssen Sie einen QueryClient einrichten und Ihre Anwendung mit dem QueryClientProvider umschließen.

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

Schritt 3: Daten mit useQuery abrufen

Um Daten abzurufen, stellt TanStack Query den useQuery-Hook bereit. Dieser Hook benötigt einen Abfrageschlüssel und eine Funktion, die ein Versprechen zurückgibt (normalerweise einen API-Aufruf).

Hier ist ein Beispiel für das Abrufen von Daten von einer 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>
  );
}

Schritt 4: Abfragestatus bearbeiten

TanStack Query erleichtert die Handhabung verschiedener Status Ihrer Abfrage, wie z. B. Laden, Fehler oder Erfolg. Sie können die von useQuery bereitgestellten Eigenschaften isLoading, isError, isSuccess und andere verwenden, um zu steuern, was basierend auf dem Status der Abfrage gerendert wird.

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

Schritt 5: Optimistische Updates

Optimistische Updates ermöglichen es Ihnen, die Benutzeroberfläche zu aktualisieren, bevor der Server das Update bestätigt, und sorgen so für ein schnelleres Benutzererlebnis. Dies kann mit dem useMutation-Hook in TanStack Query erfolgen.

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

Fazit

TanStack Query ist ein leistungsstarkes Tool, das die Art und Weise, wie Sie den serverseitigen Status in Ihren React-Anwendungen verwalten, erheblich verbessern kann. Durch die Handhabung des Datenabrufs, der Zwischenspeicherung, der Synchronisierung und mehr können Sie sich auf die Erstellung von Funktionen konzentrieren, ohne sich in der Komplexität der Zustandsverwaltung zu verlieren.

Ob Sie ein kleines Projekt oder eine große Anwendung erstellen, die Integration von TanStack Query kann zu saubererem, besser wartbarem Code und einer besseren Benutzererfahrung führen. Mit Funktionen wie automatischem erneuten Abrufen, Caching und optimistischen Updates ist TanStack Query ein unverzichtbares Werkzeug für moderne React-Entwickler.

Probieren Sie TanStack Query in Ihrem nächsten Projekt aus und erleben Sie die Effizienz und Einfachheit, die es beim Datenabruf in React mit sich bringt!

Viel Spaß beim Codieren ?‍?

Das obige ist der detaillierte Inhalt vonBeherrschen von TanStack-Abfragen: Ein umfassender Leitfaden zum effizienten Datenabruf in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!