[日本語訳]SWR ドキュメンテーション 条件付きのデータフェッチ
追記: 2021年6月8日
SWR公式日本語訳ページが追加されたので、そちらをご覧ください
このページは Conditional Fetching – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください
条件
null
を使用するか、key
としての関数を渡して、条件付きのデータフェッチをします。関数がスローするか、 falsy な値を返す場合、SWRはリクエストを開始しません。
// 条件付きフェッチ
const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher)
// ...または falsy な値を返す
const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher)
// ...または user.id が定義されていないのでエラーをスローする
const { data } = useSWR(() => '/api/data?uid=' + user.id, fetcher)
依存
SWRを使用すると、他のデータに依存するデータをフェッチすることもできます。 これにより、可能な限り最大の並列処理(ウォーターフォールを回避)と、次のデータフェッチ実行に必要なダイナミックデータの連続したフェッチが保証されます。
function MyProjects () {
const { data: user } = useSWR('/api/user')
const { data: projects } = useSWR(() => '/api/projects?uid=' + user.id)
// 関数を渡すとき、SWRは戻り値を `key`として使用します。
// 関数が falsy な値か(エラーの)スローを返す場合、SWRは一部の依存関係の準備ができていないことを認識します。
// このケースでは、`user` が読み込みされていないときに `user.id` はエラーをスローします。
if (!projects) return 'loading...'
return 'You have ' + projects.length + ' projects'
}
Author And Source
この問題について([日本語訳]SWR ドキュメンテーション 条件付きのデータフェッチ), 我々は、より多くの情報をここで見つけました https://qiita.com/tk1024/items/83522a4d5743cd686df0著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .