Wie man mit React Query und Mutation Hooks Daten abruft und erstellt

Im modernen Webentwicklungskontext ist das Abrufen und Erstellen von Daten eine der häufigsten Aufgaben. In React-Projekten gibt es mehrere Strategien, um diese Anforderungen zu erfüllen. Eine sehr effiziente Möglichkeit, dies zu tun, ist durch die Verwendung von React Query und Mutation Hooks, die eine saubere, wartbare und performante Dateninteraktion ermöglichen.

Ein grundlegender Aspekt des Datenabrufs ist die Verwendung des useQuery-Hooks, mit dem wir Daten vom Server anfordern können. Nehmen wir zum Beispiel an, wir möchten eine Liste von Posts abrufen. Dafür verwenden wir eine Funktion wie fetchPosts, die eine Anfrage an die API stellt. Diese API-Anfrage enthält einen Parameter, der uns hilft, die Posts nach einem bestimmten Kriterium zu filtern – beispielsweise nach einem Wert, der anzeigt, ob der Beitrag hervorgehoben ist (featured).

javascript
Copy code
export async function fetchPosts({ featured }) {

  const res = await fetch(`/api/posts?featured=${featured}`);
  return await res.json();
}

javascript
Copy code
const { data, isLoading } = useQuery({
  queryKey: ['posts', featured],
  queryFn: () => fetchPosts({ featured }),
});

Diese Vorgehensweise hat den Vorteil, dass React Query automatisch versucht, zuerst auf den zwischengespeicherten Wert zuzugreifen, bevor eine neue Anfrage an die API gesendet wird. Dies verbessert die Performance und vermeidet unnötige Netzwerkaufrufe.

javascript
Copy code
export async function createPost(post) {

  const res = await fetch('/api/posts', {

    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(post),
  });
  if (!res.ok) {
    throw new Error('Unable to create post');
  }
  return await res.json();
}

Innerhalb der CreatePost-Komponente können wir dann den useMutation-Hook verwenden, um die Erstellung eines neuen Posts zu initiieren:

javascript
Copy code
const createPostMutation = useMutation({

  mutationFn: createPost,
  onSuccess: () => {
    queryClient.invalidateQueries(['posts']);
  },
});

Der Vorteil dieses Ansatzes ist, dass bei Erfolg automatisch alle Anfragen, die mit dem posts-Schlüssel arbeiten, invalidiert und neu abgerufen werden, um die neuesten Daten anzuzeigen.

Natürlich gibt es zusätzliche Feinheiten, die berücksichtigt werden müssen. Ein wichtiger Punkt ist die Handhabung von Lade- und Fehlerzuständen. Bei der Verwendung von React Query und Mutation Hooks können wir leicht Statusanzeigen integrieren, die dem Benutzer Feedback geben:

javascript
Copy code
if (isLoading) {

  return <div>Loading posts...</div>;
}
if (!data) {

  return <div>Could not load posts!</div>;

}

Darüber hinaus lässt sich der Benutzererlebnis durch die Verwendung von isPending oder durch Deaktivierung von Schaltflächen während der Anfragezeit weiter verbessern:

javascript
Copy code
<button disabled={createPostMutation.isPending}>Submit</button>

Zusätzlich zur Verbesserung der Benutzererfahrung gibt es noch eine weitere Herausforderung, die mit der Art und Weise zusammenhängt, wie neue Beiträge auf dem Server gespeichert werden. Zum Beispiel kann es sein, dass neue Posts immer ans Ende der Liste angehängt werden, was nicht immer gewünscht ist. Eine Möglichkeit, dies zu beheben, besteht darin, jedem Post einen Zeitstempel zu geben und die Posts bei der Anzeige nach diesem Zeitstempel zu sortieren.

Die Verwendung von React Query und Mutation Hooks bietet eine elegante Lösung für das Datenmanagement in React-Anwendungen. Durch die Verwendung von Zwischenspeichermechanismen und die automatisierte Handhabung von Lade- und Fehlerzuständen wird der Code sowohl effizient als auch übersichtlich. Der Entwickler muss sich nicht mehr mit komplexen und unübersichtlichen Ladezuständen herumschlagen, sondern kann sich auf die Geschäftslogik konzentrieren.

Wie man eine Todo-App mit React erstellt: Von statischen zu dynamischen Komponenten

Die Entwicklung einer Todo-App in React, die aus mehreren Komponenten besteht, ist eine ideale Übung, um die Grundlagen von React zu erlernen und zu vertiefen. In diesem Kapitel betrachten wir, wie eine einfache Todo-App in React aufgebaut wird, beginnend mit der Definition von statischen Komponenten bis hin zur Implementierung dynamischer Funktionen. Dieser Prozess hilft, ein tieferes Verständnis für die Struktur und Funktionsweise von React-Anwendungen zu entwickeln.

Zunächst werden wir mit einer grundlegenden App-Struktur beginnen, die wir im Laufe der Entwicklung dynamisch erweitern werden. Der erste Schritt besteht darin, ein einfaches React-Projekt zu initialisieren und die nötigen Komponenten zu erstellen.

Initialisierung des Projekts

Für dieses Projekt verwenden wir eine minimalistische Vite-App, die in Kapitel 1 des Buches vorgestellt wurde. Die Schritte zur Projektinitialisierung sind einfach: Wir kopieren den Ordner der vorherigen Übung und erstellen einen neuen Ordner für unser Projekt. Dann öffnen wir den neuen Ordner in VS Code und entfernen die bestehende App.jsx-Datei, da wir sie im nächsten Schritt neu erstellen werden.

Struktur der App definieren

Die grundlegende Struktur der App steht bereits fest, basierend auf den Design-Mockups. Unsere App wird aus einem Header, einem Bereich zum Hinzufügen neuer Todos, einer Liste von Todos und einem Filter bestehen. Nachdem wir den Projektordner eingerichtet haben, erstellen wir die App.jsx-Datei und importieren alle notwendigen Komponenten. Dazu gehören der Header, der Bereich zum Hinzufügen von Todos, die Todo-Liste und der Filter.

Komponenten definieren

Im nächsten Schritt erstellen wir alle statischen Komponenten. Wir beginnen mit den einfacheren Komponenten und erweitern die App Schritt für Schritt. Die ersten Komponenten, die wir definieren, sind der Header, der AddTodo, die TodoList, die TodoItem und der TodoFilter.

Header-Komponente

AddTodo-Komponente

Die AddTodo-Komponente ermöglicht es den Nutzern, neue Todo-Elemente hinzuzufügen. Hierfür wird ein einfaches Formular mit einem Eingabefeld und einem Button erstellt. In der AddTodo.jsx-Datei definieren wir die AddTodo-Klasse und rendern das Formular.

TodoList-Komponente

Die TodoList-Komponente stellt eine Liste von Todo-Elementen dar. Zunächst definieren wir zwei statische Todo-Elemente und rendern sie mithilfe der TodoItem-Komponente. Diese Liste wird später dynamisch durch echte Daten ersetzt. Die TodoList-Komponente rendert die Todos mit einer map-Funktion und stellt sicher, dass jedes Element eine eindeutige key-Eigenschaft erhält.

TodoItem-Komponente

TodoFilter-Komponente

Die TodoFilter-Komponente stellt einen Filterbereich dar, der es den Nutzern ermöglicht, Todos nach bestimmten Kriterien zu filtern. In dieser Komponente erstellen wir zunächst die TodoFilterItem-Komponente, die jeweils einen einzelnen Filter anzeigt. Danach definieren wir die TodoFilter-Komponente, die mehrere TodoFilterItem-Komponenten rendert.

Die App starten

Dynamische Funktionen hinzufügen

Nun kommt der spannende Teil: die App dynamisch zu machen. Hierzu verwenden wir React's State-Management und Lifecycle-Methoden. Zuerst definieren wir eine Mock-API, die eine Liste von Todos zurückgibt, um eine Netzwerkverzögerung zu simulieren. Diese API wird später verwendet, um die Todo-Daten zu laden und in der App anzuzeigen.

Als Nächstes erstellen wir den StateContext, um die Todo-Liste global zu verwalten, und machen dann die einzelnen Komponenten dynamisch. Dazu gehören das Hinzufügen von neuen Todos, das Aktualisieren des Status von Todos und das Filtern von Todos.

Mock-API definieren

StateContext und dynamische Komponenten

Nachdem wir die API definiert haben, erstellen wir den StateContext, der die Todos im gesamten Projekt zugänglich macht. Dann passen wir die App-, AddTodo-, TodoList-, TodoItem- und TodoFilter-Komponenten an, um sie mit dynamischen Daten zu füllen. Dies bedeutet, dass die App nun auf Benutzeraktionen reagiert und Todos hinzugefügt, geändert und gelöscht werden können.

Es ist wichtig zu beachten, dass diese Implementierung den Umgang mit Zuständen und das Arbeiten mit asynchronen Daten in React verdeutlicht. Die Verwendung von useState, useEffect und Context-APIs wird uns ermöglichen, die App effizient zu verwalten und zu erweitern.