Récupération des données

const { data, error } = useSWR(key, fetcher)

C'est l'API fondamentale de SWR. Le fetcher est une fonction asynchrone qui accepte la key de SWR, et retourne les données.

La valeur retournée sera passée en tant que data, et si elle lance une erreur, elle sera attrapée en tant que error.

💡

Notez que fetcher peut être omis des paramètres s'il est fourni globalement.

Récupération

Vous pouvez utiliser n'importe quelle bibliothèque pour gérer la récupération des données, par exemple un polyfill fetch developit/unfetch (opens in a new tab):

import fetch from 'unfetch'
 
const fetcher = url => fetch(url).then(r => r.json())
 
function App () {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

💡

Si vous utilisez Next.js, vous n'avez pas besoin d'importer ce polyfill :
New Built-In Polyfills: fetch(), URL, and Object.assign If you are using Next.js, you don't need to import this polyfill:

Axios

import axios from 'axios'
 
const fetcher = url => axios.get(url).then(res => res.data)
 
function App () {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

GraphQL

Ou avec GraphQL et des bibliothèques comme graphql-request (opens in a new tab):

import { request } from 'graphql-request'
 
const fetcher = query => request('/api/graphql', query)
 
function App () {
  const { data, error } = useSWR(
    `{
      Movie(title: "Inception") {
        releaseDate
        actors {
          name
        }
      }
    }`,
    fetcher
  )
  // ...
}

Si vous voulez passer des variables à une requête GraphQL, consultez Multiple Arguments.

Configuration Globale Auto Revalidation