[日本語訳]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'
}