import { Callout } from 'nextra/components'

# Obtención De Datos

```js
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`.

<Callout>
  Tenga en cuenta que el `fetcher` puede ser omitido de los parámetros si se
  [proporciona globalmente](/docs/global-configuration).
</Callout>

## Fetch

Puedes utilizar cualquier librería para manejar data fetching, por ejemplo un
`fetch` polyfill [developit/unfetch](https://github.com/developit/unfetch):

```js
import fetch from 'unfetch'

const fetcher = url => fetch(url).then(r => r.json())

function App() {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}
```

<Callout>
  Si estás usando **Next.js**, no necesita importar este polyfill:

[Nuevos Polyfills Incorporados: fetch(), URL, y Object.assign](https://nextjs.org/blog/next-9-1-7#new-built-in-polyfills-fetch-url-and-objectassign)

</Callout>

## Axios

```js
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](https://github.com/prisma-labs/graphql-request):

```js
import { request } from 'graphql-request'

const fetcher = query => request('/api/graphql', query)

function App() {
  const { data, error } = useSWR(
    /* GraphQL */ `
      {
        Movie(title: "Inception") {
          releaseDate
          actors {
            name
          }
        }
      }
    `,
    fetcher
  )
  // ...
}
```

_Si quiere pasar variables a una query GraphQL, consulte
[Argumentos múltiples](/docs/arguments)._
