Выборка данных

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

Это самый фундаментальный API SWR. fetcher здесь представляет собой асинхронную функцию, которая принимает key SWR и возвращает данные.

Возвращаемое значение будет передано как data, и если оно будет выброшено, оно будет перехвачено как error.

💡

Обратите внимание, что fetcher можно не указывать в параметрах, если он предоставляется глобально.

Выборка (Fetch)

Вы можете использовать любую библиотеку для обработки выборки данных, например, полифил fetch — 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)
  // ...
}

💡

Если вы используете Next.js, вам не нужно импортировать этот полифил:
Новые встроенные полифилы: fetch(), URL, и 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

Или используйте GraphQL с такими библиотеками, как 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: "Начало") {
        releaseDate
        actors {
          name
        }
      }
    }`,
    fetcher
  )
  // ...
}

Если вы хотите передавать переменные в запрос GraphQL, ознакомьтесь с разделом Множественные аргументы.

Глобальная конфигурация Обработка ошибок