如何在 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中文網其他相關文章！
