如何在 React Query 中實作資料快取和持久化儲存？
隨著前端應用程式的複雜性增加，資料管理變得非常重要。 React Query 是一個用於資料擷取和管理的強大工具。它提供了一種簡化資料擷取、快取和同步的方式，可幫助我們快速建立高效且易於維護的應用程式。
雖然 React Query 預設具有記憶體快取功能，但刷新頁面後，快取的資料將會遺失。為了解決這個問題，我們需要將快取資料持久化到本地儲存。在本文中，我們將探討如何在 React Query 中實作資料快取和持久化儲存。
首先，我們需要安裝 React Query：
npm install react-query
接下來，讓我們來看看如何使用 React Query 來取得資料並對其進行快取和持久化儲存。
import React from 'react';
import { useQuery, QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
return response.json();
};
const DataComponent = () => {
const { data, isLoading, error } = useQuery('data', fetchData);
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div>
{data.map((item) => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
};
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<DataComponent />
</QueryClientProvider>
);
};
export default App;在上述程式碼中，我們使用 useQuery 鉤子來取得資料。我們傳遞一個唯一的識別碼 'data' 作為查詢鍵，以及一個取資料的非同步函數 fetchData。 React Query 會自動快取我們的數據，並在以後的請求中使用快取資料。
現在，我們來實現資料的持久化儲存。我們可以使用 queryClient 的 getQueryData 和 setQueryData 方法來手動快取和取得資料。同時，我們可以使用 localStorage 或其他類似 localStorage 的持久化儲存方案將資料保存在本機。
const fetchData = async () => {
const cachedData = queryClient.getQueryData('data');
if (cachedData) {
return cachedData;
}
const response = await fetch('https://api.example.com/data');
const data = response.json();
queryClient.setQueryData('data', data);
localStorage.setItem('data', JSON.stringify(data));
return data;
};
const DataComponent = () => {
const { data, isLoading, error } = useQuery('data', fetchData);
// ...
return (
// ...
);
};
const App = () => {
const cachedData = JSON.parse(localStorage.getItem('data'));
if (cachedData) {
queryClient.setQueryData('data', cachedData);
}
return (
// ...
);
};在上述程式碼中，我們首先透過 queryClient.getQueryData 方法嘗試從快取中取得資料。如果數據存在，則直接傳回快取的數據，避免重新發起請求。如果資料不存在，則進行正常的資料請求流程，並使用 queryClient.setQueryData 方法將資料快取起來。
在 App 元件中，我們首先嘗試從本機儲存中取得快取的資料。如果資料存在，則使用 queryClient.setQueryData 方法將資料設定為初始快取資料。
透過上述程式碼範例，我們成功實現了在 React Query 中的資料快取和持久化儲存。這使得我們的應用程式能夠更有效率地管理數據，並在刷新頁面後能夠恢復先前的狀態。
總結：
queryClient 的 getQueryData 和 setQueryData 方法手動快取和取得資料。 localStorage 或其他類似 localStorage 的持久化儲存方案將資料保存在本機。 以上是如何在 React Query 中實現資料快取和持久化儲存？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
