Next.jsのuseSWRを一度だけ実行したい時(useState使わない方法)

useSWRを一度だけ実行したい

NextjsでwebWebサービスを開発していてuseSWRを用いてデータを取ってきたいと思った時に、二回目以降データを取ってこられると困る！という状況が発生してしまいました。

まあ普通にuseStateで条件付けさせてもいいのですがそのためだけのuseStateはできるだけ使いたくなかったので今回はuseStateを使わずにswrの機能で一度だけ取ってくる方法をご紹介したいと思います。

const Apage = () => {
    const { data, error } = useSWR('/a-data', fetcher);
    return (
        <div>{data}</div>
    );
};

今までは簡単にこんな感じの構造でuseSWRを使っていたとすると、

const useStaleSWR = (dataKey) => {
  const revalidationOptions = {
    revalidateOnMount: !cache.has(dataKey), //here we refer to the SWR cache
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
  };

  return useSWR(dataKey, fetcher, revalidationOptions);
}

const Apage = () => {
    const { data, error } = useStaleSWR('/a-data');
    return (
        <div>{data}</div>
    );
};

こんなふうにswrをラップしてoptionにrevalidateOnMount: !cache.has(dataKey)を追加してあげるとキャッシュがない場合にのみ取ってくるようになります。

fetcherはご私心のfetcherをご利用ください。

調べたら毎回出てくるのでそれでいいかな？

今回私はこのコードを作った後に「あ、そもそもuseSWR使わなくてもいいやん」となりこのコード全体を消したのでこれを実装した時に参考にしたstackoverflowのページを貼っておきますね！

(要するに動作は確認済み。)

Can I fetch data only once when using swr?