Skip to content
ドキュメント
データの取得

データフェッチ

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 を使用している場合は、次のポリフィルをインポートする必要はありません:
New Built-In Polyfills: fetch(), URL, and 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 クエリーに渡したい場合は、複数の引数 を確認してください。

Last updated on 2021年7月8日