Startseite / Artikel / Datenübertragung mit RTK-Abfrage: Ein Praxisleitfaden zu Mutationen

Redux Toolkit RTK Query React JavaScript State Management

Datenübertragung mit RTK-Abfrage: Ein Praxisleitfaden zu Mutationen

Erfahren Sie, wie Sie builder.mutation() in RTK Query verwenden können, um POST-Anfragen zu senden, Lade- und Fehlerzustände zu verwalten sowie ein funktionsfähiges Formularkomponente zu erstellen.

1875 Wörter

Einführung

Zuvor haben wir erklärt, wie man Redux Toolkit Query (RTK Query) einrichtet und Leseoperationen mit builder.query() ausführt. Dadurch konnten wir Daten von einer API abrufen und sie in einer React-App anzeigen, ohne selbst useEffect(), useState() oder eigene Fetch-Logik schreiben zu müssen.

Das Lesen von Daten ist jedoch nur die halbe Miete bei der Arbeit mit APIs. Die meisten Anwendungen benötigen außerdem Möglichkeiten, Aufzeichnungen auf dem Server hinzuzufügen, zu ändern oder zu löschen.

Betrachten wir einige gängige Szenarien:

Ein Registrierungsformular sendet neue Kontodaten.
Eine Anmeldeseite übermittelt Zugangsdaten zur Überprüfung.
Eine Blog-Plattform veröffentlicht neue Artikel.
Ein Online-Shop platziert neue Bestellungen.
Eine To-Do-App speichert neu hinzugefügte Aufgaben.

Jede dieser Aktionen überträgt Informationen vom Client zum Server, und das geschieht in der Regel über eine HTTP POST-Anfrage.

RTK Query betrachtet POST-Aufrufe nicht als Abfragen – es behandelt sie als Mutationen.

In diesem Artikel wird Schritt für Schritt gezeigt, wie Daten mit builder.mutation() gesendet werden. Wir zerlegen jeden Codeabschnitt sowie jede Konfigurationseinstellung, damit Sie nicht nur verstehen, was eingegeben werden muss, sondern auch warum jeder Teil wichtig ist.

Verständnis der HTTP-Methoden

Bevor man sich dem Code widmet, ist es hilfreich, die verschiedenen HTTP-Verben und deren Zweck zu überprüfen.

Eine typische REST API stellt mehrere Operationen zur Verfügung:

Method	Zweck	Beispiel
GET	Daten lesen	Sämtliche Benutzer abrufen
POST	Neuere Daten hinzufügen

Einen Benutzer erstellen PUT Einen vorhandenen Ressourcen überschreiben Ein Benutzerkonto ersetzen PATCH Einen Teil einer Ressource ändern Den Namen eines Benutzers ändern DELETE Daten löschen Einen Benutzer löschen

Dieser Leitfaden konzentriert sich auf POST, die Methode zur Erstellung neuer Ressourcen auf einem Server.

Warum verwendet POST nicht `builder.query()`?

Das ist ein häufiger Punkt der Verwirrung für Anfänger.

Wenn builder.query() Daten abrufen kann, warum kann dieselbe Funktion keine Daten an den Server senden?

Der Grund liegt darin, wofür jedes Werkzeug konzipiert ist.

Abfragen

Abfragen dienen dazu, Informationen abzurufen.

Typische Beispiele:

Benutzer abrufen
Produkte abrufen
Bestellungen abrufen
Beiträge abrufen

Weil dieselben Daten möglicherweise wiederholt angefordert werden, speichern Abfragen ihre Ergebnisse automatisch im Cache.

Mutationen

Mutationen dienen dazu, Daten zu ändern.

Typische Beispiele:

Nutzer erstellen
Nutzer aktualisieren
Nutzer löschen
Einloggen
Sich registrieren

Eine Mutation signalisiert dem Server, dass sich etwas ändern muss.

Genau aus diesem Grund behandelt RTK Query Mutationen getrennt von normalen Abfragen.

Was wir bauen werden

Wir werden ein einfaches Formular erstellen, das einen neuen Benutzer an den Server sendet.

Die Ziel-Endpunkt-Adresse lautet:

https://jsonplaceholder.typicode.com/users

Und die im Anfragekörper gesendete Payload wird wie folgt aussehen:

{
  "name": "John Doe",
  "email": "john@example.com"
}

Projektstruktur

src
│
├── app
│   └── store.js
│
├── services
│   └── api.js
│
├── components
│   └── AddUser.jsx
│
├── App.jsx
│
└── main.jsx

Die Konfiguration des Redux-Stores bleibt unverändert wie zuvor. Alles, was wir hinzufügen müssen, ist ein Mutation-Endpunkt sowie eine Komponente, die die Formulareingaben verarbeitet.

Schritt 1 – Einen Mutation-Endpunkt erstellen

Öffnen Sie die Datei des API-Dienstes:

src/services/api.js

Fügen Sie anschließend die neue Endpunktdefinition innerhalb des endpoints-Objekts hinzu.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const api = createApi({
  reducerPath: "api",  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com/",
  }),  endpoints: (builder) => ({    addUser: builder.mutation({      query: (newUser) => ({
        url: "users",
        method: "POST",
        body: newUser,
      }),    }),  }),});export const {
  useAddUserMutation,
} = api;

Lassen Sie uns dies Zeile für Zeile durchgehen.

Verständnis von `builder.mutation()`

addUser: builder.mutation({

Während builder.query() zum Abrufen von Daten dient, wird builder.mutation() verwendet, wenn Sie etwas auf dem Server ändern müssen.

Häufige Anwendungsfälle:

Anlegen von Benutzern
Registrierung von Konten
Anmelden
Aktualisierung von Produkten
Löschung von Beiträgen

Jedes Mal, wenn Ihre Anwendung Daten im Backend schreibt oder ändert, ist eine Mutation das richtige Werkzeug.

Verständnis von `query()`

query: (newUser) => ({

Diese Funktion erhält alle Daten, die Sie aus Ihrem React-Code an sie übergeben.

Zum Beispiel, wenn Sie folgendes senden:

addUser({
  name: "John",
  email: "john@example.com",
});

dann enthält der Parameter mit dem Namen

newUser

folgende Inhalte:

{
  name: "John",
  email: "john@example.com"
}

Dieses Objekt wird als Anfragekörper gesendet.

Verständnis der URL

url: "users",

Da die Basis-URL wie folgt konfiguriert ist:

https://jsonplaceholder.typicode.com/

RTK Query kombiniert sie automatisch zu:

https://jsonplaceholder.typicode.com/users

so müssen Sie die vollständige Adresse nie selbst eingeben.

Verständnis der Methode

method: "POST",

Diese Zeile weist RTK Query ausdrücklich an, eine POST-Anfrage zu senden. Wenn Sie sie weglassen, verwendet die Anfrage standardmäßig GET.

Verständnis des Körpers

body: newUser,

Alles, was in newUser gespeichert ist, wird als Anfrage-Payload weitergeleitet, zum Beispiel:

{
  "name": "John",
  "email": "john@example.com"
}

Der Server erhält dieses Objekt genau in dem Zustand, in dem es konstruiert wurde.

Schritt 2 – Exportieren des generierten Hooks

export const {
  useAddUserMutation,
} = api;

Genauso wie Abfragen einen automatisch generierten Hook liefern

useGetUsersQuery()

erzeugen Mutationen automatisch ihren eigenen Hook:

useAddUserMutation()

Man schreibt diesen Hook niemals manuell – RTK Query erstellt ihn für einen auf der Grundlage des Endpunktnamens.

Schritt 3 – Erstellen der React-Komponente

Erstellen Sie eine neue Datei:

src/components/AddUser.jsx

und fügen Sie diesen Code hinzu:

import { useState } from "react";

import { useAddUserMutation } from "../services/api";const AddUser = () => {  const [name, setName] = useState("");
  const [email, setEmail] = useState("");  const [
    addUser,
    {
      isLoading,
      isSuccess,
      error,
    },
  ] = useAddUserMutation();  const handleSubmit = async (e) => {    e.preventDefault();    await addUser({
      name,
      email,
    });    setName("");
    setEmail("");  };  return (
    <form onSubmit={handleSubmit}>      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />      <input
        type="email"
        placeholder="Enter Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />      <button type="submit">
        Add User
      </button>      {isLoading && <p>Saving...</p>}      {isSuccess && <p>User Added Successfully.</p>}      {error && <p>Something went wrong.</p>}    </form>
  );};export default AddUser;

Lassen Sie uns aufschlüsseln, was hier vor sich geht.

Verständnis von `useAddUserMutation()`

const [
  addUser,
  {
    isLoading,
    isSuccess,
    error,
  },
] = useAddUserMutation();

Im Gegensatz zu Abfruchooks liefern Mutationchooks ein Array anstelle eines Objekts. Das erste Element:

addUser

Es handelt sich um die Funktion, die aufgerufen wird, um die Anfrage auszulösen, während das zweite Element ein Objekt ist, das nützliche Statusinformationen zu dieser Anfrage enthält.

Verständnis von `addUser()`

await addUser({
  name,
  email,
});

Durch Aufruf dieser Funktion wird eine Anfrage wie folgt gesendet:

POST /users

mit einem JSON-Payload in dieser Form:

{
  "name": "John",
  "email": "john@example.com"
}

Auf der Backend-Seite wird dieser Payload verwendet, um ein völlig neues Benutzerkonto zu erstellen.

Verständnis der Mutationszustände

Neben der Auslösefunktion stellt RTK Query eine Reihe von Statusflaggen zur Verfügung, die beschreiben, was mit der Anfrage geschieht.

`isLoading`

isLoading

Diese Flagge wird auf true gesetzt, solange die Mutation noch ausgelöst wird, was sie ideal dafür macht, einen Absenden-Button zu deaktivieren oder einen Ladeindikator anzuzeigen, bis die Antwort zurückkommt.

`isSuccess`

isSuccess

Sobald die Anfrage fehlerfrei abgeschlossen ist, wird dieser Wert auf true gesetzt, was ein klares Signal dafür ist, eine Bestätigungsanzeige anzuzeigen oder den Benutzer an einen anderen Ort zu leiten.

`error`

error

Falls der Server mit einem Fehler antwortet, werden die Details hier angezeigt, sodass Sie einen lesbaren Fehler anzeigen können anstelle einer fehlerhaften Benutzeroberfläche.

Schritt 4 – Komponente rendern

Öffnen Sie die Hauptanwendungsdatei:

src/App.jsx

und ersetzen Sie ihren Inhalt durch Folgendes:

import AddUser from "./components/AddUser";

function App() {
  return <AddUser />;
}export default App;

Dann starten Sie den Entwicklungsserver:

npm run dev

Füllen Sie die Formfelder aus und klicken Sie auf Add User – RTK Query kümmert sich darum, die POST-Anfrage für Sie abzusenden.

Vollständiger Anfragenfluss

Hier ist eine Zusammenfassung dessen, was im Hintergrund abläuft, von der Formulareingabe bis zur Aktualisierung des Zustands:

User Fills Form
        │
        ▼
Clicks Submit
        │
        ▼
addUser()
        │
        ▼
Generated Mutation Hook
        │
        ▼
RTK Query
        │
        ▼
fetchBaseQuery()
        │
        ▼
POST Request
        │
        ▼
Server Response
        │
        ▼
Mutation State Updates
        │
        ▼
React Re-renders

Achten Sie auf alles, was in diesem Ablauf fehlt:

fetch()
axios.post()
useEffect()
Manuell verfolgter Ladezustand
Manuell verfolgter Fehlerzustand

RTK Query kümmert sich im Hintergrund um all diese Aspekte.

`builder.query()` vs `builder.mutation()`

Es ist sehr wichtig zu wissen, wann man welche dieser Builder-Methoden verwenden sollte.

builder.query() dient dazu, Daten abzurufen – in der Regel über GET-Anfragen – und erzeugt Hooks wie useGetUsersQuery(), die automatisch ausgeführt werden, sobald das Komponente gerendert wird. builder.mutation() hingegen dient dazu, Daten mithilfe von Methoden wie POST, PUT, PATCH oder DELETE zu ändern. Er erzeugt Hooks wie useAddUserMutation(), die nur dann ausgeführt werden, wenn Sie explizit die Auslösfunktion aufrufen, anstatt beim Renderen. Kurz gesagt: Queries dienen dem Lesen, Mutationen dem Erstellen, Aktualisieren oder Löschen.

Das richtige Werkzeug für jede Aufgabe zu wählen, sorgt dafür, dass Ihre API-Logik konsistent bleibt und leicht verständlich ist.

Best Practices

Halten Sie diese Richtlinien stets im Hinterkopf, wenn Sie mit RTK Query POST-Funktionalität entwickeln:

wählen Sie builder.mutation(), wenn eine Operation Daten auf dem Server ändert.

Halten Sie die Anfragekörper kompakt und senden Sie nur die Felder, die der Backend tatsächlich benötigt.

Berechnen Sie stets die Werte von isLoading, isSuccess und error, damit die Benutzeroberfläche reaktiv und informativ wirkt.

Wählen Sie beschreibende Endpunktnamen wie addUser, createPost oder registerUser.

Überprüfen Sie, was der Benutzer eingegeben hat, bevor Sie die Daten an den Server senden.

Betrachten Sie unwrap(), falls Sie Erfolge und Fehler lieber mit einem try...catch-Block in Ihren Komponenten handhaben möchten.

Kernpunkte

Durch das Durchgehen dieses Leitfadens haben Sie gelernt, wie man:

eine Mutation mit builder.mutation() einrichtet.
einen POST-Endpunkt innerhalb einer API-Slice verbindet.
JSON-Daten an einen Backend-Service sendet.

Nutzen Sie den automatisch generierten Hook useAddUserMutation().

Starten Sie eine POST-Anfrage direkt von einem React-Formular aus.

Verwalten Sie Lade-, Erfolgs- und Fehlerzustände ohne manuell erstellte Standardcode-Strukturen.

Trennen Sie Abfragen von Mutationen voneinander.

Anwenden Sie bewährte Methoden zur Erstellung wartbarer API-Interaktionen.

Dieses Muster kommt in Produktivanwendungen ständig vor – bei Registrierungsprozessen, Authentifizierung, Veröffentlichung von Blogbeiträgen, Bestellungen und unzähligen weiteren Szenarien zur Erstellung von Daten.

Was kommt als Nächstes?

Sobald Sie mit POST-Anfragen vertraut sind, ist der natürliche nächste Schritt das Erlernen, wie man bestehende Datensätze aktualisiert und löscht.

Der kommende Leitfaden behandelt:

Die Aktualisierung von Datensätzen mit PUT- und PATCH-Anfragen.
Das Löschen von Datensätzen über DELETE-Anfragen.
Übermittlung dynamischer IDs an Mutation-Endpunkte.
Außer Kraft Setzen von im Cache gespeicherten Daten, damit die Benutzeroberfläche automatisch aktualisiert wird.
Nutzung von Tags – providesTags und invalidatesTags – um alles synchron zu halten, ohne manuelles Nachladen.

Sobald Sie diesen Leitfaden beendet haben, sind Sie in der Lage, eine vollständige CRUD-Anwendung mithilfe von für die Produktion geeigneten RTK Query-Mustern zu erstellen.