The context SWRConfig
can provide global configurations (options) for all SWR hooks.
<SWRConfig value={options}>
<Component/>
</SWRConfig>
In this example, all SWR hooks will use the same fetcher provided to load JSON data, and refresh every 3 seconds by default:
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 }) // override
// ...
}
function App () {
return (
<SWRConfig
value={{
refreshInterval: 3000,
fetcher: (resource, init) => fetch(resource, init).then(res => res.json())
}}
>
<Dashboard />
</SWRConfig>
)
}
Besides, all the options listed, SWRConfig
also accepts an optional provider
function. Please refer to the Cache section for more details.
<SWRConfig value={{ provider: () => new Map() }}>
<Dashboard />
</SWRConfig>
You can use the useSWRConfig
hook to get the global configurations, as well as mutate
and cache
:
import { useSWRConfig } from 'swr'
function Component () {
const { refreshInterval, mutate, cache, ...restConfig } = useSWRConfig()
// ...
}
Nested configurations will be extended. If no <SWRConfig>
is used, it will return the default ones.