ReactのTQueryKeyを使用してクエリの結果をキャッシュ化

React

ReactのTQueryKeyとは

TQueryKey は、React Query というライブラリで使用される型です。
React Query は、サーバーの状態管理を簡素化するための強力なツールです。
TQueryKey は、キャッシュを識別するためのキーを表す型であり、クエリを一意に識別するために使用されます。

通常、TQueryKey は次のような形式をとります：

  • string
  • number
  • Array
  • カスタムオブジェクト

このキーは、クエリキャッシュを管理し、同じデータを複数の場所で使用する際に役立ちます。

具体的な例を挙げると、次のように使用されます：

import { useQuery } from 'react-query';

const fetchUser = async (id: string) => {
  const response = await fetch(/api/user/${id});
  return response.json();
};

const MyComponent = ({ userId }: { userId: string }) => {
  const queryKey: TQueryKey = ['user', userId];
  const { data, error, isLoading } = useQuery(queryKey, () => fetchUser(userId));

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error: {error.message}</span>;

  return <div>{data.name}</div>;
};

この例では、queryKey として ['user', userId] を使用しています。
このキーは、React Query のキャッシュシステムで一意にユーザーデータを識別するために使用されます。

TQueryKeyを使用してキャッシュ化された場合、同じAPIは再度実行されることはない

TQueryKey を使用してキャッシュ化された場合、同じ queryKey に対する API リクエストはキャッシュから取得されるため、再度実行されることはありません。
ただし、キャッシュが無効化されたり、キャッシュの有効期限が切れたりした場合には再度実行されます。

React Query のキャッシュ管理には以下のポイントがあります：

1. キャッシュキーの一意性:
TQueryKey を使ってクエリを一意に識別します。
同じ queryKey でクエリを呼び出した場合、キャッシュからデータが提供されます。
2. キャッシュの有効期限:
デフォルトでは、React Query は 5 分間キャッシュを保持しますが、staleTime や cacheTime を設定することでこの挙動をカスタマイズできます。
3. キャッシュの手動無効化:
queryClient.invalidateQueries を使って特定のクエリのキャッシュを手動で無効化し、再フェッチをトリガーできます。

例として、staleTime と cacheTime を設定してキャッシュの動作をカスタマイズする方法を示します：

import React, { useState } from 'react';
import { useQuery, QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const fetchUser = async (userId: string) => {
  const response = await fetch(/api/user/${userId});
  return response.json();
};

const MyComponent = ({ initialUserId }: { initialUserId: string }) => {
  const [userId, setUserId] = useState(initialUserId);

  const queryKey: TQueryKey = ['user', userId];
  const { data, error, isLoading } = useQuery(
    queryKey,
    () => fetchUser(userId),
    {
      staleTime: 1000 * 60 * 10, // 10分間はキャッシュを最新とみなす
      cacheTime: 1000 * 60 * 60, // 1時間後にキャッシュを削除する
    }
  );

  const updateUserId = (newUserId: string) => {
    setUserId(newUserId);
  };

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error: {error.message}</span>;

  return (
    <div>
      <div>{data.name}</div>
      <button onClick={() => updateUserId('newUserId')}>Change User ID</button>
    </div>
  );
};

const App = () => (
  <QueryClientProvider client={queryClient}>
    <MyComponent initialUserId="initialUserId" />
  </QueryClientProvider>
);

export default App;

この例では、staleTime を 10 分、cacheTime を 1 時間に設定しています。
これにより、クエリは 10 分間は最新のデータとしてキャッシュから提供され、それ以降は古いデータとして再フェッチされます。
また、1 時間後にキャッシュが削除されます。