SWRInfiniteのgetKeyに新しい引数を追加するメモ

SWRInfiniteのgetKeyに新しい引数を追加するメモ

SWRInfiniteのgetKeyはpageIndexとpreviousPageDataの2種類がドキュメントのに書かれている。もしキャッシュのキー名にユーザーIDなどを動的に設定する場合があるかもしれないのでその実装メモ。

const getKey = (pageIndex, previousPageData) => {
  if (previousPageData && !previousPageData.length) return null
  // これを
  return `/users?page=${pageIndex}&limit=10`

  // こうしたい
  return `/users?page=${pageIndex}&limit=10&user_id=${userId}`
}

実装

export const getKey = (
  pageIndex: number,
  previousPageData: データの型,
  key: string,
) => {
  if (previousPageData && !previousPageData.length) return null
  return `/users?page=${pageIndex}&user_id=${key}?page=${pageIndex + 1}`;
};

const useSWRInfiniteHook = (userId: string) => {
  const { 
    ~
  } = useSWRInfinite<データの型, Error>(
    // スプレッド構文で展開することでデータとページインデックスを渡せる
    (...args: [
      pageIndex: number,
      previousPageData: データの型
    ]) => getKey(...args, key),
    fetcher,
    {
      // オプション
    }
  );
}

mutateを読んで、キャッシュをクリアするとき

/**
 * 処理後にキャッシュをクリアするカスタムフック 
 */
const useClearCache = () => {
  // 処理を実行
  mutate(unstable_serialize((...args: [
      pageIndex: number,
      previousPageData: データの型
    ]) => getKey(...args, "ユーザーID")));
}

最後に

気になってしまったので、力業で実装してみましたが、もっとスマートなやり方をご存知の方、コメントお願いいたします。