附注：2021年6月8日

因为SWR公式的日语翻译页面已经添加了，所以请前往那里查看。

这个页面是关于数据获取 – SWR的日本语翻译。
有关SWR日本语翻译的全部内容，请查看SWR日本语翻译。

数据检索

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

這是一個非常基本的SWR API。這裡的 fetcher 是一個異步函數，接收SWR的鍵並返回數據。

如果回傳值被傳遞為data，並且如果有錯誤被拋出，它將被捕獲並作為error處理。

? 备注：如果fetcher是从全局设置中提供的，则可以在参数中省略。

取来

您可以使用任何库来处理数据的获取。例如，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: 新内置的Polyfills: fetch(), URL和Object.assign。

艾克西奥斯

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这样的库：

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查询中传递变量，请确保检查多个参数。