如何在 React Query 中實現數據的增、刪、改、查？
在現代 Web 開發中，前后端分離的架構方式得到了廣泛應用。作為前端開發者，我們通常需要與后端進行數據交互，包括增加（Create）、刪除（Delete）、更新（Update）和查詢（Query）數據。為了簡化這些操作，提高開發效率，React Query 庫成為了一個流行的選擇。本文將介紹如何使用 React Query 實現數據的增、刪、改、查。
React Query 是一個狀態管理庫，它專注于管理異步數據。它提供了一套強大的工具和API，用于獲取、更新和刪除數據，以及自動管理數據的緩存和失效。
首先，我們需要安裝并配置 React Query?？梢允褂靡韵旅畎惭b 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 中實現數據的增、刪、改、查？的詳細內容，更多請關注www.92cms.cn其它相關文章！
