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

FRONT END

みなさんこんにちは!
lismotechの大石です。
今回のブログでは、ReactQueryを使用してぱフォーメンスを考慮したフロントエンドの実装を行っていきます。

ReactQueryとは何か?

ReactアプリケーションのAPIからの非同期データの取得や、キャッシュ、同期、更新を効率的に扱うために使用します。
つまり、データフェッチや自動キャッシュ、データ変更時に際レンダリングといった管理を簡単に行えます。
また、取得したデータをキャッシュに保存し、データに変更があった時のみ再取得することで不要な通信を減らすことでパフォーマンスの向上に繋げる事が出来ます。

ライブラリのインストール

reactアプリケーションでreact-queryとaxiosをインストールします。
axiosは使用してもしなくても良いです。

npm install react-query
npm install axios

プロジェクト全体で適用する

QueryClientProviderを使用する事でReact Queryのフックをプロジェクト全体で使用する事ができるようになります。

import { ReactQueryTest } from "./component/ReactQueryTest";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

const App = () => {
 return (
  <QueryClientProvider client={queryClient}>
   <ReactQueryTest />
  </QueryClientProvider>
 );
};

export default App;

キャッシュ管理

const { isLoading, error, data } = useQuery("posts", fetchPosts);

useQueryの第一引数にクエリキーを渡し、第二引数はPromisを返す関数を渡します。
第二引数には基本的にはAPIの呼び出しを行う関数を使用します。
クエリキーはキャッシュされるデータを一意に識別するキーになります。

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> 
 );
};

終わりに

この記事ではReact Queryの基本的な使い方を解説しました。
今回の内容ではReact Queryの一部しか解説出来ませんでしたが、応用的な機能などもあると思いますので気になった方はドキュメントなどを参考にしたり調べてみて下さい。
React Queryを使用することでパフォーマンスの向上、生産性の向上にもつながります。ぜひ使ってみて下さい。


NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く!!

LINE公式アカウントはこちらから。

友だち追加

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00