suspenseモードのuseSWRをラップしたcustom hookを作る

tags: javascript swr typescript

SWRをラップしてカスタムフックを作るにあたって型周りをどうするか悩んだのでメモ

やりたいこと

カスタムフックでuseSWRをラップして、レスポンスであるdataを加工した値を返したい。なお型はreturn useSWRした時と同じになるようにしたい

実装

キー周りはフロントエンドアーキテクチャの話: Resource Setの紹介を参考にしている

import { useMemo } from 'react'
import useSWR from 'swr'

export const useXxx = () => {
  return useSWR(
    xxxCacheKeyGenerator.generateGenreKey(),
    async () => {
      return await xxxApi()
    },
    { suspense: true },
  )
}

export const useFilteredXxx = (): ReturnType<typeof useXxx> => {
  const { data, ...other } = useXxx()

  const filteredItems = useMemo(() => {
    return data.items.filter((item) => item.flag)
  }, [data])

  return {
    ...other,
    data: {
      ...data,
      items: filteredItems,
    },
  }
}

これでuseFilteredXxx()でデータを取ってきたときもuseXxx()と同じ使い心地になった。suspenseモードじゃなくても普通に動きそうだしSWRは良く出来てるな