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 中国語 Web サイトの他の関連記事を参照してください。