資料獲取

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

這是 SWR 最基本的 API。這裡的 fetcher 是一個非同步函數，它接收 SWR 的 key，並返回資料。

返回的值將作為 data 傳遞，如果它拋出錯誤，它將被捕獲為 error。

💡

請注意，如果 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。
新的內建 Polyfills：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 查詢，請查看多個參數。

全域配置自動重新驗證