[日本語訳]SWR ドキュメンテーション データフェッチ

追記: 2021年6月8日

SWR公式日本語訳ページが追加されたので、そちらをご覧ください

このページは Data Fetching - SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください

データフェッチ

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

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

戻り値は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を使用している場合はこのポリフィルをimportする必要はありません: 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と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クエリに変数を渡したい場合は、複数の引数を確認してください。