react-router で複数 API からリソースをフェッチしたい

はじめに

react-router 好き guppy0356 です。今日は loader のなかで複数 API からリソースをフェッチしたい場合の忘備録です。

どうするのか

Promise で良いとき

オブジェクトでラップして返して上げましょう。qiita.fetchItems と microcms.fetchContents は Promise を返します。

export async function loader() {
  return { qiitaItems: qiita.fetchItems(), microcmsItems: microcms.fetchContents() }
}

フェッチを完全に終えたいとき

Promise.all を使って処理が終わるまで待ちましょう。

export async function loader() {
  let [qiitaItems, microcmsItems] = await Promise.all([
    qiita.fetchItems(),
    microcms.fetchContents()
  ]);

  return { qiitaItems, microcmsItems }
}

ハマりそうなこと

フェッチを完全に終えたい、かつ loader を定義しない場合は、次のようなコンポーネントを作成することも可能です。サーバーコンポーネントなので問題ありませんね。

export default async function individuals() {
  let [qiitaItems, microcmsItems] = await Promise.all([
    qiita.fetchItems(),
    microcms.fetchContents()
  ]);

  const [value, setValue] = useState(0)

  return (
    <div className="w-full px-20 py-20">
      <p>{ qiitaItems.length }</p>
      <p>{ microcmsItems.length }</p>
      { value }
    </div>
  );
}

このとき useState を使って state 管理をしようとすると次のようなメッセージが出てきます。async/await はサーバーコンポーネントでしか使えません

async/await is not yet supported in Client Components, only Server Components. 
This error is often caused by accidentally adding `'use client'` to
a module that was originally written for the server.