data-fetching.es-ES.mdx

import Callout from 'nextra-theme-docs/callout'

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](/docs/global-configuration).

Fetch

Puedes utilizar cualquier librería para manejar data fetching, por ejemplo un fetch polyfill 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 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:

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.