追記: 2021年6月8日
SWR公式日本語訳ページが追加されたので、そちらをご覧ください
このページは Arguments – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください
引数
デフォルトでは、key
は引数として fetcher
に渡されます。 したがって、次の3つの式は同等です。
useSWR('/api/user', () => fetcher('/api/user'))
useSWR('/api/user', url => fetcher(url))
useSWR('/api/user', fetcher)
複数の引数
一部の場合では、複数の引数(任意の値またはオブジェクト)を fetcher
関数に渡すと便利です。 たとえば、認証付きフェッチリクエスト:
useSWR('/api/user', url => fetchWithToken(url, token))
これは正しくありません。 データの識別子(またはキャッシュキー)は '/api/user'
であるため、token
が変更されても、SWRは同じキーを使用し、間違ったデータを返します。
代わりに、fetcher
の複数の引数を含む配列を key
パラメーターとして使用できます。
const { data: user } = useSWR(['/api/user', token], fetchWithToken)
fetchWithToken
関数は引き続き同じ2つの引数を受け入れますが、キャッシュキーも token
に関連付けられるようになります。
オブジェクトの受け渡し
ユーザースコープでデータをフェッチする別の関数 fetchWithUser(api、user)
があるとします。 次のことができます。
const { data: user } = useSWR(['/api/user', token], fetchWithToken)
// ...それを引数として別のクエリに渡します
const { data: orders } = useSWR(user ? ['/api/orders', user] : null, fetchWithUser)
リクエストのキーは、両方の値の組み合わせになりました。 SWRは、すべてのレンダリングで引数を浅く比較し、引数のいずれかが変更された場合は再検証をトリガーします。
オブジェクトはレンダリングごとに異なるオブジェクトとして扱われるため、レンダリング時にオブジェクトを再作成しないでください。
// このようにしないで! 毎回のレンダーでオブジェクトが変化します。
useSWR(['/api/user', { id }], query)
// 代わりに、“ステーブル”な値だけ渡してください
useSWR(['/api/user', id], (url, id) => query(url, { id }))
Dan Abramovは、このブログ投稿で依存関係について非常によく説明しています。