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:

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:

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.

Récupération des données

Récupération

Axios

GraphQL

On this page