如何在 React Query 中實現資料的增、刪、改、查？

如何在 React Query 中實現資料的增、刪、改、查？

在現代 Web 開發中，前後端分離的架構方式得到了廣泛應用。作為前端開發者，我們通常需要與後端進行資料交互，包括增加（Create）、刪除（Delete）、更新（Update）和查詢（Query）資料。為了簡化這些操作，提高開發效率，React Query 函式庫成為了一個受歡迎的選擇。本文將介紹如何使用 React Query 實現資料的增、刪、改、查。

React Query 是一個狀態管理庫，它專注於管理非同步資料。它提供了一套強大的工具和API，用於獲取、更新和刪除數據，以及自動管理數據的快取和失效。

首先，我們需要安裝並設定 React Query。可以使用以下指令安裝React Query：

npm install react-query

或

yarn add react-query

然後，在你的應用程式的根元件中加入React Query 的Provider：

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

const queryClient = new QueryClient();

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

接下來，讓我們來看看如何在React Query 中實作資料的增刪改查。

建立/新增資料

要建立新的數據，我們可以使用 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} 位址，並在回應中解析資料。在資料載入中，我們展示一個 "Loading..." 的文本，如果出現錯誤，我們展示錯誤的文本，否則，我們展示查詢到的資料。

綜上所述，我們已經學習如何使用 React Query 來實現資料的增、刪、改、查。 React Query 提供了許多強大的工具和 API，用於簡化資料管理和互動。透過使用這些工具和 API，我們可以更輕鬆地操作數據，提高前端開發的效率。希望本文能對你有幫助！

以上是如何在 React Query 中實現資料的增、刪、改、查？的詳細內容。更多資訊請關注PHP中文網其他相關文章！