追記: 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は、このブログ投稿で依存関係について非常によく説明しています。