Wie füge ich Daten in React Query hinzu, lösche, ändere und frage sie ab?

Wie füge ich Daten in React Query hinzu, lösche, ändere und frage sie ab?

In der modernen Webentwicklung wird häufig die Front-End- und Back-End-Trennarchitektur verwendet. Als Front-End-Entwickler müssen wir normalerweise mit den Back-End-Daten interagieren, einschließlich des Hinzufügens (Create), Löschens (Delete), Aktualisierens (Update) und Abfragens (Query). Um diese Vorgänge zu vereinfachen und die Entwicklungseffizienz zu verbessern, ist die React Query-Bibliothek zu einer beliebten Wahl geworden. In diesem Artikel wird erläutert, wie Sie mit React Query Daten hinzufügen, löschen, ändern und abfragen.

React Query ist eine Zustandsverwaltungsbibliothek, die sich auf die Verwaltung asynchroner Daten konzentriert. Es bietet einen leistungsstarken Satz an Tools und APIs zum Abrufen, Aktualisieren und Löschen von Daten sowie zur automatischen Verwaltung der Zwischenspeicherung und Ungültigmachung von Daten.

Zuerst müssen wir React Query installieren und konfigurieren. Sie können React Query mit dem folgenden Befehl installieren:

npm install react-query

oder

yarn add react-query

Fügen Sie dann den React Query Provider in der Stammkomponente Ihrer Anwendung hinzu:

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序的其他组件 */}
    </QueryClientProvider>
  );
}

Als nächstes schauen wir uns an, wie Sie Daten in React Query Add implementieren , löschen, ändern und prüfen.

Daten erstellen/hinzufügen

Um neue Daten zu erstellen, können wir den Hook useMutation verwenden. Dieser Hook empfängt eine Funktion als Parameter und wird zum Senden der Anfrage und zum Erstellen neuer Daten verwendet. Diese Funktion muss ein Versprechen zurückgeben und auflösen, nachdem die Daten erfolgreich erstellt wurden. useMutation hook。这个 hook 接收一个函数作为参数，用于发送请求并创建新的数据。这个函数必须返回 Promise，并在数据创建成功后进行 resolve。

import { useMutation } from 'react-query';

function CreateData() {
  const { mutate, isLoading } = useMutation((data) =>
    fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleCreate = () => {
    mutate({ name: 'New Data' }); // 传递新数据到 mutate 函数
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们使用了 useMutation hook 来创建一个名为 CreateData 的组件。mutate 函数用于触发请求并创建新的数据。在这个例子中，我们发送一个 POST 请求到 /api/data 地址，并将新的数据作为请求的正文。请求成功后，通过调用 res.json() 方法来解析响应，并在 Promise resolve 后返回数据。

删除数据

要删除数据，我们可以再次使用 useMutation hook，并发送一个 DELETE 请求。类似于创建数据的例子，我们需要传递一个删除的函数，并在函数返回结果为成功后 resolve。

import { useMutation } from 'react-query';

function DeleteData({ dataId }) {
  const { mutate, isLoading } = useMutation(() =>
    fetch(`/api/data/${dataId}`, {
      method: 'DELETE',
    }).then((res) => res.json())
  );

  const handleDelete = () => {
    mutate();
  };

  return (
    <div>
      <button onClick={handleDelete} disabled={isLoading}>
        {isLoading ? 'Deleting...' : 'Delete Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们定义了一个名为 DeleteData 的组件，并使用 useMutation hook 创建了一个删除函数。这个函数发送一个 DELETE 请求到 /api/data/{dataId} 地址，其中 {dataId} 是要删除的数据的唯一标识符。请求成功后，我们将结果作为 Promise resolve 返回。

更新数据

要更新数据，我们可以再次使用 useMutation hook，发送一个 PUT 或者 PATCH 请求。类似于创建数据和删除数据的例子，我们需要传递一个函数用于更新数据，并在函数返回结果为成功后 resolve。

import { useMutation } from 'react-query';

function UpdateData({ dataId }) {
  const { mutate, isLoading } = useMutation((data) =>
    fetch(`/api/data/${dataId}`, {
      method: 'PUT',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleUpdate = () => {
    mutate({ name: 'Updated Data' });
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={isLoading}>
        {isLoading ? 'Updating...' : 'Update Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们创建了一个名为 UpdateData 的组件，并使用 useMutation hook 创建了一个更新函数。这个函数发送一个 PUT 请求到 /api/data/{dataId} 地址，并将更新的数据作为请求的正文。请求成功后，我们将结果作为 Promise resolve 返回。

查询数据

要查询数据，在 React Query 中我们可以使用 useQuery hook。这个 hook 接收一个函数作为参数，并返回一个包含数据的对象。在函数中，我们发送一个 GET 请求，并在响应中解析数据。

import { useQuery } from 'react-query';

function GetData({ dataId }) {
  const { isLoading, error, data } = useQuery('data', () =>
    fetch(`/api/data/${dataId}`).then((res) => res.json())
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h2>Data: {data.name}</h2>
    </div>
  );
}

在上面的代码中，我们使用了 useQuery hook 创建了一个名为 GetData 的组件。useQuery hook 接收一个字符串作为标识符，并在请求成功后自动缓存数据。我们发送一个 GET 请求到 /api/data/{dataId}rrreee

Im obigen Code verwenden wir den Hook useMutation, um eine Komponente namens CreateData zu erstellen. Die Funktion mutate wird verwendet, um Anfragen auszulösen und neue Daten zu erstellen. In diesem Beispiel senden wir eine POST-Anfrage an die Adresse /api/data und fügen die neuen Daten als Hauptteil der Anfrage ein. Nachdem die Anfrage erfolgreich war, wird die Antwort durch Aufrufen der Methode res.json() analysiert und die Daten werden zurückgegeben, nachdem Promise aufgelöst wurde.

Daten löschen🎜🎜Um Daten zu löschen, können wir den Hook useMutation erneut verwenden und eine DELETE-Anfrage senden. Ähnlich wie beim Beispiel zum Erstellen von Daten müssen wir eine Löschfunktion übergeben und auflösen, nachdem die Funktion ein Erfolgsergebnis zurückgegeben hat. 🎜rrreee🎜Im obigen Code haben wir eine Komponente namens DeleteData definiert und mithilfe des Hooks useMutation eine Löschfunktion erstellt. Diese Funktion sendet eine DELETE-Anfrage an die Adresse /api/data/{dataId}, wobei {dataId} die eindeutige Kennung der zu löschenden Daten ist. Nachdem die Anfrage erfolgreich war, geben wir das Ergebnis als Promise-Lösung zurück. 🎜🎜Daten aktualisieren🎜🎜Um Daten zu aktualisieren, können wir den Hook useMutation erneut verwenden und eine PUT- oder PATCH-Anfrage senden. Ähnlich wie in den Beispielen zum Erstellen und Löschen von Daten müssen wir eine Funktion übergeben, um die Daten zu aktualisieren und aufzulösen, nachdem die Funktion erfolgreich zurückgegeben wurde. 🎜rrreee🎜Im obigen Code haben wir eine Komponente namens UpdateData und eine Aktualisierungsfunktion mit dem Hook useMutation erstellt. Diese Funktion sendet eine PUT-Anfrage an die Adresse /api/data/{dataId} mit den aktualisierten Daten als Hauptteil der Anfrage. Nachdem die Anfrage erfolgreich war, geben wir das Ergebnis als Promise-Lösung zurück. 🎜🎜Daten abfragen🎜🎜Um Daten abzufragen, können wir in React Query den Hook useQuery verwenden. Dieser Hook empfängt eine Funktion als Argument und gibt ein Objekt zurück, das die Daten enthält. Innerhalb der Funktion senden wir eine GET-Anfrage und analysieren die Daten in der Antwort. 🎜rrreee🎜Im obigen Code haben wir den Hook useQuery verwendet, um eine Komponente namens GetData zu erstellen. Der useQuery-Hook empfängt einen String als Bezeichner und speichert die Daten nach einer erfolgreichen Anfrage automatisch zwischen. Wir senden eine GET-Anfrage an die Adresse /api/data/{dataId} und analysieren die Daten in der Antwort. Beim Laden der Daten zeigen wir den Text „Laden“ an. Wenn ein Fehler auftritt, zeigen wir den Fehlertext an. 🎜🎜Zusammenfassend haben wir gelernt, wie man React Query zum Hinzufügen, Löschen, Ändern und Abfragen von Daten verwendet. React Query bietet viele leistungsstarke Tools und APIs, um die Datenverwaltung und Interaktion zu vereinfachen. Durch den Einsatz dieser Tools und APIs können wir Daten einfacher manipulieren und die Effizienz der Front-End-Entwicklung verbessern. Ich hoffe, dieser Artikel kann Ihnen hilfreich sein! 🎜

Das obige ist der detaillierte Inhalt vonWie füge ich Daten in React Query hinzu, lösche, ändere und frage sie ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!