もっと、SWR
以前 SWR について
お話しました
https://slides.com/syujihiga/nextjs-swr
ひとことでいうと
SWR は、
リモートデータフェッチ用のReact Hooks ライブラリです。
で、今回はその続きで
前回説明した基本の機能
「以外」をいくつか説明します
まずは前提として
SWR における key とは？
-
REST API はエンドポイントからベース URL を除外したもの
-
GraphQL は クエリ
// REST API
const { data } = useSWR('/api/v1/user')
// GraphQL
const { data } = useSWR(
`{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}`,
fetcher
)// REST API
const { data } = useSWR('/api/v1/user')
// GraphQL
const { data } = useSWR(
`{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}`,
fetcher
)key はユニーク（一意）である
つまり
key が同じであれば
「同じフェッチ」であり
「同じキャッシュ」を参照する
では、いつくかの機能を
紹介していきます
１
ポーリング
-
ポーリングの間隔などを設定
const { data } = useSWR(key, fetcher, {
refreshInterval: 5000, // 間隔
refreshWhenHidden: true, // ウィンドウが非表示のとき
refreshWhenOffline: true // ブラウザがオフラインのとき
})エラー時の再試行
2
-
デフォルトで設定済み
-
再試行の間隔や回数などを設定
const { data, error } = useSWR(key, fetcher, {
shouldRetryOnError: true, // 再試行するか
errorRetryInterval: 5000, // 再試行の間隔
errorRetryCount: 10, // 再試行の回数
// 細かく設定する場合
onErrorRetry: (error, key, option, revalidate, { retryCount }) => {
if (retryCount >= 5) return
if (error.status === 404) return
setTimeout(() => revalidate({ retryCount: retryCount + 1 }), 3000)
}
})条件による fetch
3
-
false の場合はフェッチしないので
エラーにならない -
エラーにならないので再試行しない
const shouldFetch = false
const { data, error } = useSWR(
shouldFetch ? key : null,
fetcher
)refetch と
キャッシュデータの変更
4
-
グローバルまたはローカルがある
-
キャッシュデータの書き換えだけもできる
// local
const { data, mutate } = useSWR(key, fetcher)
mutate(
{ ...data, hoge: 1 },
false // refetch するか
)// global
import useSWR, { mutate } from 'swr'
function App() {
mutate(key, { hoge: 1 })
}Prefetch
5
-
トップレベルまたは個別に prefetch を可能
<!-- トップレベル -->
<link
rel="preload"
href="{key}"
as="fetch"
crossorigin="anonymous">// 個別
mutate(key, fetch(key).then(res => res.json()))リクエストの重複を排除
6
-
デフォルトで設定済み
-
同じ key の同じリクエストを排除
-
排除対象の期間を設定
-
ユーザの行動には関係ないっぽい
const { data } = useSWR(key, fetcher, {
dedupingInterval: 3000
})SSR 用の初期値
7
-
getServerSideProps で取得したデータを追加
const initialData = { hoge: 1 }
const { data } = useSWR(key, fetcher, {
initialData
})Suspense モード
8
-
React Suspense に対応
import { Suspense } from 'react'
function App() {
const { data } = useSWR(key, fetcher, {
suspense: true
})
return (
<Suspense fallback={<div>loading...</div>}>
<div>{data.id}</div>
</Suspense>
)
}ほんとに機能が豊富
使わない理由がないとさえ思える
みんなも使ってみてね
END
もっと、SWR
By Syuji Higa
もっと、SWR
- 434
