[日本語訳]SWR ドキュメンテーション グローバル設定

追記: 2021年6月8日

SWR公式日本語訳ページが追加されたので、そちらをご覧ください

このページは Global Configuration – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください

グローバル設定

SWRConfig コンテキスト は全ての SWR hooks にグローバル設定(オプション)を提供できます。

<SWRConfig value={options}>
  <Component/>
</SWRConfig>

この例では、すべての SWR hooks が提供されている同じ fetcher を使用してJSONデータを読み込み、デフォルトで3秒ごとに更新します。

import useSWR, { SWRConfig } from 'swr'

function Dashboard () {
  const { data: events } = useSWR('/api/events')
  const { data: projects } = useSWR('/api/projects')
  const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // 上書き
  // ...
}

function App () {
  return (
    <SWRConfig 
      value={{
        refreshInterval: 3000,
        fetcher: (resource, init) => fetch(resource, init).then(res => res.json())
      }}
    >
      <Dashboard />
    </SWRConfig>
  )
}