Skip to content
Docs
Configuration Globale

Configuration Globale

Le contexte SWRConfig peut fournir des configurations globales (options) pour tous les hooks SWR.

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

Dans cet exemple, tous les hooks SWR utiliseront le même fetcher fourni pour charger des données JSON, et se rafraîchiront toutes les 3 secondes par défaut :

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>
  )
}

Configuration imbriquées

SWRConfig fusionne la configuration du contexte parent. Il peut recevoir soit un objet, soit une configuration fonctionnelle. La configuration fonctionnelle reçoit la configuration parent en argument et renvoie une nouvelle configuration que vous pouvez personnaliser vous-même.

Exemple de configuration d'objet

import { SWRConfig, useSWRConfig } from 'swr'
 
function App() {
  return (
    <SWRConfig
      value={{
        dedupingInterval: 100,
        refreshInterval: 100,
        fallback: { a: 1, b: 1 },
      }}
    >
      <SWRConfig
        value={{
          dedupingInterval: 200, // remplacera la valeur mère puisque qu'elle est primitive
          fallback: { a: 2, c: 2 }, // fussionera avec la valeur mère puisque qu'elle est un objet fussionnable
        }}
      >
        <Page />
      </SWRConfig>
    </SWRConfig>
  )
}
 
function Page() {
  const config = useSWRConfig()
  // {
  //   dedupingInterval: 200,
  //   refreshInterval: 100,
  //   fallback: { a: 2,  b: 1, c: 2 },
  // }
}

Exemple de configuration fonctionnelle

import { SWRConfig, useSWRConfig } from 'swr'
 
function App() {
  return (
    <SWRConfig
      value={{
        dedupingInterval: 100,
        refreshInterval: 100,
        fallback: { a: 1, b: 1 },
      }}
    >
      <SWRConfig
        value={parent => ({
          dedupingInterval: parent.dedupingInterval * 5,
          fallback: { a: 2, c: 2 },
        })}
      >
        <Page />
      </SWRConfig>
    </SWRConfig>
  )
}
 
function Page() {
  const config = useSWRConfig()
  // {
  //   dedupingInterval: 500,
  //   fallback: { a: 2, c: 2 },
  // }
}

API supplémentaires

Fournisseur de cache

En plus de toutes les options répertoriées, SWRConfig accepte également une fonction provider facultative. Veuillez vous référer à la section Cache pour plus de détails.

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

Accès aux configurations globales

Vous pouvez utiliser le hook useSWRConfig pour obtenir les configurations globales, ainsi que mutate et cache :

import { useSWRConfig } from 'swr'
 
function Component () {
  const { refreshInterval, mutate, cache, ...restConfig } = useSWRConfig()
 
  // ...
}

La configuration imbriquée sera étendue. Si aucun <SWRConfig> n'est utilisé, il renverra les configurations par défaut.

APIRécupération des données