React Query データベース プラグイン: キャッシュのウォーミングと削除の戦略

React Query Database Plugin: キャッシュのウォームアップとエビクションを実装するための戦略、特定のコード サンプルが必要です

最新のフロントエンド アプリケーションの複雑さが増すにつれて、データ管理とキャッシュの重要性がますます高まっています。 React Query は、React アプリケーションでのデータの取得、キャッシュ、更新操作の処理に役立つ強力なデータ管理ライブラリです。ただし、React Query はデフォルトで組み込みのキャッシュ戦略を使用するため、キャッシュのウォームアップやエビクション戦略など、より高度なキャッシュ制御が必要な場合は、React Query データベース プラグインを使用してこれを実現できます。

この記事では、React Query データベース プラグインを使用してキャッシュのウォームアップとエビクション戦略を実装する方法を紹介し、具体的なコード例を示します。

まず、React Query と React Query データベース プラグインをインストールする必要があります。これらは、次のコマンドを使用してインストールできます:

npm install react-query react-query-database

インストールが完了したら、これらのライブラリをアプリケーションに導入できます:

import { QueryClient, QueryClientProvider } from 'react-query';
import { createDatabaseCache } from 'react-query-database';

次に、QueryClient を作成し、データベースをキャッシュします。プラグイン:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 5, // 设置默认缓存时间为 5 分钟
      plugins: [
        createDatabaseCache(), // 添加数据库缓存插件
      ],
    },
  },
});

これで、データベース キャッシュ プラグインが QueryClient に正常に追加されました。次に、いくつかのカスタム キャッシュのウォームアップおよびエビクション戦略を定義できます。

まず、キャッシュの予熱を実装する方法を見てみましょう。ユーザー情報を取得するリクエストがあるとします。

import { useQuery } from 'react-query';

const fetchUser = async (userId) => {
  // 模拟获取用户信息的异步请求
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  return data;
};

const UserProfile = ({ userId }) => {
  const { data } = useQuery(['user', userId], () => fetchUser(userId));

  if (data) {
    // 渲染用户信息
  }

  return null;
};

次に、ユーザー エクスペリエンスを向上させるために、アプリケーションの開始時に一部のユーザー情報をキャッシュにプリロードしたいとします。アプリケーションの入り口に次のコードを追加できます。

import { useQueryClient } from 'react-query';

const App = () => {
  const queryClient = useQueryClient();

  useEffect(() => {
    const userIds = [1, 2, 3]; // 假设我们要预热的用户 ID 列表

    userIds.forEach((userId) => {
      const queryKey = ['user', userId];
      queryClient.prefetchQuery(queryKey, () => fetchUser(userId));
    });
  }, []);

  return (
    // 应用程序的其他内容
  );
};

この例では、プレヒートするユーザー ID を含む配列を定義し、 useEffect の queryClient.prefetchQuery メソッドを使用してキャッシュをプレヒートします。 fetchUser 関数はウォームアップ中に呼び出され、データをキャッシュに保存します。このようにして、UserProfile コンポーネントがユーザー情報をレンダリングする必要がある場合、別のネットワーク要求を行うことなく、キャッシュからデータを即座に取得します。

次に、キャッシュエビクション戦略を実装する方法を見てみましょう。記事のリストを取得するリクエストがあるとします。

import { useQuery } from 'react-query';

const fetchArticles = async () => {
  // 模拟获取文章列表的异步请求
  const response = await fetch('/api/articles');
  const data = await response.json();
  return data;
};

const ArticlesList = () => {
  const { data } = useQuery('articles', fetchArticles);

  if (data) {
    // 渲染文章列表
  }

  return null;
};

デフォルトでは、React Query のキャッシュ戦略は、データをメモリに保存し、一定期間後に自動的に削除することです。ただし、場合によっては、カスタムの削除戦略を実装する必要がある場合があります。これを実現するには、クエリの staleTime パラメータを設定します。

const { data } = useQuery('articles', fetchArticles, {
  staleTime: 1000 * 60 * 30, // 设置缓存过期时间为 30 分钟
});

この例では、キャッシュの有効期限を 30 分に設定します。データの有効期限が切れると、React Query は自動的に新しいリクエストを開始して最新のデータを取得し、キャッシュを更新します。

キャッシュの有効期限を設定することに加えて、クエリのcacheTimeパラメータを使用して、データがキャッシュ内に存在する最大時間を設定することもできます。データがこの時間を超えると、React Query はそのデータをキャッシュから削除します。

const { data } = useQuery('articles', fetchArticles, {
  staleTime: 1000 * 60 * 30, // 设置缓存过期时间为 30 分钟
  cacheTime: 1000 * 60 * 60 * 24, // 设置最长缓存时间为 24 小时
});

この例では、最大キャッシュ時間を 24 時間に設定します。これは、キャッシュの有効期限を超えていない場合でも、データは 24 時間後に削除されることを意味します。

React Query データベース プラグインを使用すると、キャッシュのウォームアップと削除戦略を簡単に実装して、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。この記事では、React Query データベース プラグインをインストールして構成する方法を説明し、キャッシュのウォームアップとエビクションの具体的なコード例を示します。これらの例が、React Query データベース プラグインの理解を深めて使用し、アプリケーションを最適化するのに役立つことを願っています。

以上がReact Query データベース プラグイン: キャッシュのウォーミングと削除の戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。