1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[日本語訳]SWR ドキュメンテーション 引数

Last updated at Posted at 2021-01-04

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?