データフェッチ
const { data, error } = useSWR(key, fetcher)こちらは SWR のとても基本的な API です。この fetcher は非同期関数であり、SWR の key を受け取りデータを返します。
返り値は data として渡されます。もし例外が投げられた場合は error としてキャッチされます。
💡
fetcher が
グローバルで提供されている
場合は、パラメーターから省略できることに注意してください。
Fetch
fetch ポリフィル developit/unfetch (opens in a new tab) など、任意のライブラリを使用してデータのフェッチを処理できます：
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 (opens in a new tab) のようなライブラリで 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 クエリーに渡したい場合は、複数の引数 を確認してください。