React Query (TanStack Query): Effizienter Datenabruf und Statusverwaltung für React

React Query (TanStack Query): Eine leistungsstarke Bibliothek zum Datenabruf und zur Zustandsverwaltung für React

React Query (jetzt TanStack Query genannt) ist eine äußerst beliebte Bibliothek zum Datenabruf und zur Zustandsverwaltung für React-Anwendungen. Es vereinfacht die Arbeit mit Remote-Daten, indem es die Komplexität des Datenabrufs, Zwischenspeicherns, Synchronisierens und Paginierens bewältigt. React Query abstrahiert einen Großteil des manuellen Prozesses, der mit dem Stellen von API-Anfragen, dem Speichern und Aktualisieren von Daten und dem Verwalten von Ladezuständen verbunden ist.

TanStack Query hilft Entwicklern, den Serverstatus in React-Anwendungen mit minimalem Setup zu verwalten und sorgt so für ein reibungsloses Benutzererlebnis, insbesondere bei asynchronen Vorgängen.

---

1. Was ist React Query (TanStack Query)?

React Query ist ein Tool zum Datenabruf und Zustandsverwaltung, das dabei hilft, den Prozess der Interaktion mit serverseitigen Daten in React-Anwendungen zu vereinfachen. Es abstrahiert und verwaltet das Abrufen, Zwischenspeichern, Synchronisieren und Hintergrundaktualisieren von Daten.

Es wird hauptsächlich zum Verwalten des Serverstatus verwendet, der sich auf Daten bezieht, die von einem Remote-Server oder einer Remote-API stammen, wie Daten von REST-APIs, GraphQL oder einer anderen Datenquelle.

Hauptmerkmale:

• Automatisches Caching: React Query speichert abgerufene Daten automatisch zwischen, was einen schnelleren nachfolgenden Datenabruf ohne zusätzliche Netzwerkanfragen ermöglicht.
• Automatische Synchronisierung: Sie stellt sicher, dass Ihre Daten zwischen Client und Server synchron bleiben, selbst wenn der Benutzer zwischen Seiten wechselt oder die App erneut besucht.
• Hintergrundabruf: React Query kann Daten automatisch im Hintergrund erneut abrufen, um sicherzustellen, dass der Benutzer immer über die aktuellsten Daten verfügt.
• Abfragen und Paginierung: React Query unterstützt standardmäßig Abfragen und Paginierung, was diese allgemeinen Aufgaben vereinfacht.

---

2. Kernkonzepte von React Query

1. Abfragen

Abfragen in React Query werden verwendet, um Daten von einem Server (oder einer externen Datenquelle) abzurufen. Eine Abfrage wird durch einen eindeutigen Schlüssel identifiziert, den React Query zum Zwischenspeichern und Verfolgen der Daten verwendet.

Beispiel:

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

• Der Hook useQuery ruft die Daten mithilfe der Funktion fetchPosts ab. Die Posts-Zeichenfolge ist der eindeutige Schlüssel, und React Query speichert die abgerufenen Daten unter diesem Schlüssel zwischen.

2. Mutationen

Mutationen werden verwendet, um Daten auf dem Server zu ändern oder zu erstellen (z. B. POST-, PUT-, DELETE-Anfragen). Mutationen können wie Abfragen verfolgt werden und Ihren Status nach einer erfolgreichen Mutation automatisch aktualisieren.

Beispiel:

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

• Der useMutation-Hook wird für Vorgänge wie das Erstellen, Aktualisieren oder Löschen von Daten verwendet.

3. Caching

React Query speichert die Ergebnisse von Abfragen automatisch zwischen. Dieses Caching ermöglicht ein schnelleres Rendern und vermeidet doppelte Anfragen an den Server. Zwischengespeicherte Daten werden automatisch aktualisiert, wenn eine Abfrage erneut abgerufen wird.

Sie können das Caching-Verhalten an die Anforderungen Ihrer App anpassen, indem Sie beispielsweise eine Cache-Zeit festlegen oder eine veraltete Zeit angeben (die Zeit, nach der die zwischengespeicherten Daten als veraltet gelten).

Beispiel:

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. Paginierung

React Query bietet integrierte Unterstützung für die Paginierung. Sie können paginierte Daten mit benutzerdefinierten Seiten- und Limit-Parametern abrufen und die Antworten werden entsprechend zwischengespeichert.

Beispiel:

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

• Der useQuery-Hook wird mit einem Array-Schlüssel (['posts', page]) verwendet, um paginierte Daten abzurufen.

---

3. Installieren und Einrichten von React Query (TanStack Query)

Um React Query verwenden zu können, müssen Sie React-Query (TanStack Query) installieren:

npm install react-query

1. React Query Provider einrichten

Um React Query in Ihrer Anwendung zu aktivieren, müssen Sie Ihre Stammkomponente in den QueryClientProvider einschließen, um der gesamten App den erforderlichen Kontext bereitzustellen.

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

const queryClient = new QueryClient();

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

• QueryClient ist das Kernobjekt von React Query. Es verwaltet alle Abfragen und Mutationen in Ihrer App.

---

4. Erweiterte Funktionen von React Query

1. Paginierung und unendliche Abfrage

React Query unterstützt Paginierung und unendliches Scrollen mit useInfiniteQuery, sodass Sie unendliche Listen und Paginierung verarbeiten können.

Beispiel:

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. Abfrageungültigmachungen

Sie können eine Abfrage manuell mit queryClient.invalidateQueries ungültig machen. Dadurch wird ein erneuter Abruf der Daten für den angegebenen Abfrageschlüssel erzwungen.

Beispiel:

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

• Dadurch wird sichergestellt, dass nach dem Erstellen eines neuen Beitrags die Liste der Beiträge automatisch erneut abgerufen wird.

---

5. Vorteile der Verwendung von React Query

1. Vereinfachter Datenabruf

React Query reduziert den Boilerplate für die Handhabung von Lade-, Erfolgs- und Fehlerzuständen und macht das Abrufen von Daten einfacher und deklarativer.

2. Automatisches Caching

Abgerufene Daten werden standardmäßig zwischengespeichert, wodurch unnötige Netzwerkanfragen reduziert und Ihre App beschleunigt wird.

3. Hintergrundaktualisierungen

React Query ermöglicht den Datenabruf im Hintergrund und stellt so sicher, dass die Daten Ihrer App auch dann aktuell bleiben, wenn sie nicht explizit erneut abgerufen werden.

4. Integrierte Paginierung und unendliche Abfragen

Der Umgang mit Paginierung und unendlichem Scrollen ist mit den integrierten Hooks von React Query einfach und effizient.

5. DevTools zum Debuggen

React Query bietet eine hervorragende DevTools-Schnittstelle zum Überprüfen von Abfragen, Mutationen und deren Zuständen in Echtzeit.

---

**6. Abschluss

**

React Query (TanStack Query) bietet eine effiziente und skalierbare Möglichkeit zum Datenabruf und zur Statusverwaltung in React-Anwendungen. Mit integriertem Caching, Hintergrundabruf, Paginierung und Fehlerbehandlung macht React Query die Interaktion mit serverseitigen Daten einfach und nahtlos.

---

Das obige ist der detaillierte Inhalt vonReact Query (TanStack Query): Effizienter Datenabruf und Statusverwaltung für React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!