データフェッチ

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

これはSWRの非常に基本的なAPIです。ここのfetcherは、SWRのkeyを受け取り、データを返す非同期関数です。

戻り値はdataとして渡され、エラーが発生した場合はerrorとしてキャッチされます。

💡

fetcherは、グローバルに提供されている場合はパラメータから省略できることに注意してください。グローバルに提供されている場合.

Fetch

データフェッチを処理するために任意のライブラリを使用できます。たとえば、fetchポリフィル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**を使用している場合は、このポリフィルをインポートする必要はありません。
新しい組み込みポリフィル：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クエリに変数を渡したい場合は、複数の引数を確認してください。

グローバル設定自動再検証