Data Fetching

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

Essa é a API mais fundamental do SWR. A função fetcher aqui é uma função assíncrona que aceita a chave do SWR, e retorna os dados.

O valor retornado será passado como data, e se ele der erro, será capturado como error.

Note que fetcher pode ser omitido dos parâmetros se ele for fornecido globalmente.

Fetch

Você pode usar qualquer biblioteca para lidar com a obtenção de dados, por exemplo o 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)
  // ...
}

Se você está usando Next.js, você não precisa importar este polyfill:
New Built-In Polyfills: fetch(), URL, and 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

Ou usando GraphQL com bibliotecas 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
  )
  // ...
}

Se você quiser passar variáveis para uma query GraphQL, cheque Argumentos Múltiplos.

Data Fetching

Fetch

Axios

GraphQL

On this page