数据获取

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

这是 SWR 的最基本 API。这里的 fetcher 是一个异步函数，它 **接受 SWR 的 key**，并返回数据。

返回值将作为 data 传递，如果它抛出错误，则会作为 error 捕获。

💡

请注意，如果 fetcher 在全局范围内提供，则可以省略参数中的 fetcher。在全局范围内提供.

Fetch

您可以使用任何库来处理数据获取，例如 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)
  // ...
}

💡

如果您使用的是 **Next.js**，则无需导入此 polyfill
新的内置 polyfill：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-request (在新标签页中打开) 这样的库与 GraphQL 一起使用

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
  )
  // ...
}

如果您想将变量传递给 GraphQL 查询，请查看多个参数。

全局配置自动重新验证