Obtención De Datos

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

Esta es la API fundamental de SWR. El fetcher aquí es una función asíncrona que acepta el key de SWR, y devuelve los datos.

El valor devuelto será pasado como data, y si lanza, será capturado como error.

💡

Tenga en cuenta que el fetcher puede ser omitido de los parámetros si se proporciona globalmente.

Fetch

Puedes utilizar cualquier librería para manejar data fetching, por ejemplo un fetch polyfill 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 estás usando Next.js, no necesita importar este polyfill:
Nuevos Polyfills Incorporados: fetch(), URL, y Object.assign

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

O utilizando GraphQL con librerías como 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 quiere pasar variables a una query GraphQL, consulte Argumentos múltiples.

Configuración Global Gestión De Errores