Next.js で SWR を使って API のキャッシュとグローバルな状態管理を行う

SWR とは

SWR は、 Next.js も開発している Vercel が開発したライブラリ。 Next.js も採用しているのであれば SWR も採用しやすいです。

バージョン

swr 2.3.3

SWR で API の内容をキャッシュする

// axios で API を叩く
// もちろん exios じゃなくても良い
export const getUserHoge = async (userId: string): Promise<Hoge[]> => {
  return axios.get(`/user/${userId}/hoge`).then(response => {
    return response.data;
  })
}

// React tsx のコードの API を叩く箇所で useSWR を使う
// 第一引数はキャッシュのキー、第二引数は API を叩く関数
$userId = xxxxx
const { data, mutate } = useSWR<Hoge[]>(`/user/${userId}/hoge`, getUserHoge)

// data に API レスポンスの結果が入る
console.log(data)

// キャッシュを飛ばして data を取り直したい場合は mutate を呼ぶ
// React の再レンダリングも行われる
mutate()

SWR でグローバルステートを利用する

単にグローバルな状態を管理したい場合

const { data: userName, mutate } = useSWR('username', null, { initialData: "initial-user-name" })

// 状態を更新したい場合
mutate("new-user-name")