React Queryでの効果的なキャッシュ管理方法

import React from "react";
import axios from "axios";
import { useQueryClient, useQuery } from "react-query";

export const ReactQueryTest = () => {
 const queryClient = useQueryClient();
 const fetchPosts = async () => {
   // 2秒間の遅延を作成する
   await new Promise((resolve) => setTimeout(resolve, 2000));
   // JSONPlaceholder APIから投稿データを取得する。
  const response = await axios.get(
   "https://jsonplaceholder.typicode.com/posts"
  );
  // レスポンスデータ
  return response.data;
 };

 // useQueryフックを使用してデータを取得し、キャッシュ管理を行う
 const { isLoading, error, data } = useQuery("posts", fetchPosts);

 // 特定のクエリキーのキャッシュされたデータを取得
 const cachedData = queryClient.getQueryData("posts");
 console.info(cachedData);

 // ローディング状態の処理
 if (isLoading) return <p>Loading...</p>;

 // エラー発生時の処理
 if (error) return <p>エラーが発生しました: {error.message}</p>;


 return (
  <div>
   <ul>
   {data.map((post) => (
    <li key={post.id}>{post.title}</li>
   ))}
   </ul>
 </div> 
 );
};