もっと、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

Made with Slides.com