Skip to content
ドキュメント
グローバルな設定

グローバルな設定

SWRConfig コンテキストによって、すべての SWR フックに対するグローバルな設定( オプション )を提供できます。

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

次の例では、すべての SWR フックに対して、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>
  )
}

Extra APIs

キャッシュプロバイダー

紹介されているすべてのオプションに加えて、 SWRConfig または provider 関数も受け入れます。詳細はキャッシュセクションを参照してください。

<SWRConfig value={{ provider: () => new Map() }}>
  <Dashboard />
</SWRConfig>

グローバル設定へアクセス

useSWRConfig フックを使ってグローバル設定、およびミューテーションキャッシュを取得できます:

import { useSWRConfig } from 'swr'

function Component () {
  const { refreshInterval, mutate, cache, ...restConfig } = useSWRConfig()

  // ...
}

ネストされた設定の場合は拡張されます。もし <SWRConfig> を使用してない場合は、デフォルトの値を返します。

Last updated on 2022年5月25日