如何在 React Query 中實現資料快取和持久化儲存？

如何在 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 中的資料快取和持久化儲存。這使得我們的應用程式能夠更有效率地管理數據，並在刷新頁面後能夠恢復先前的狀態。

總結：

• 使用 React Query 可以輕鬆取得和管理資料。
• React Query 預設具有記憶體快取功能，但刷新頁面後，快取的資料將會遺失。
• 我們可以使用 queryClient 的 getQueryData 和 setQueryData 方法手動快取和取得資料。
• 我們可以使用 localStorage 或其他類似 localStorage 的持久化儲存方案將資料保存在本機。
• 透過資料快取和持久化存儲，我們可以提高應用程式的效能並恢復先前的狀態。

以上是如何在 React Query 中實現資料快取和持久化儲存？的詳細內容。更多資訊請關注PHP中文網其他相關文章！