前回の記事では
SWRを使い始めを記載しました。今回は、SWR の機能である再フェッチを無効化する
useSWRImmutableを紹介します。
useSWRImmutableを利用すると、データの再取得、再検証を無効化して再フェッチをしないようにできます。公式ドキュメントを載せておきます。
例えば当ブログでは API を経由したCloud Firestoreに格納された NoSQL データベースを利用しています。これは取得回数に応じて料金が発生します。
なので、できればページを行き来した時に一々問い合わせをさせたくないという気持ちがあります（更新頻度もそこまで頻繁ではないです；）
そこで、先のuseSWRImmutableを使って、ページをリロードしない限り API に問い合わせをしないように作りたいと思いました。下記に実際に当ブログで使っているコードを記載します（型や一部機能は省略しています）
// ~/customHooks/useTop.ts
import useSWRImmutable from 'swr/immutable';
import getPostList from '~/services/getPostList';
const useTop = () => {
const { data, error } = useSWRImmutable('/get/titlelist', getPostList);
return { topResponse: data, isLoading: !error && !data, isError: error };
};
export default useTop;
元々useSWRだった場所を単純にuseSWRImmutableに置き換えただけです。この変更により一度訪れたページにもう一度アクセスした時に、再フェッチしない挙動になります。
API の問い合わせが繰り返し行われていないことが Chrome のデベロッパーツールから確認できます。利用方法によっては、Immutable な状態にしたほうが望ましい場合もあるかと思います。今回のケースでは、即座に変更しなければならない情報がないということとFirestoreの問い合わせ回数を減らしたいという要求からピッタリの機能だと思いました。