Await

ストリーミングデータを使用するには、ストリーミングガイドを参照してください。

<Await> コンポーネントは、useLoaderData から取得した遅延ローダーの Promise を解決する役割を担います。

import { Await } from "@remix-run/react";

<Suspense fallback={<div>読み込み中...</div>}>
  <Await resolve={somePromise}>
    {(resolvedValue) => <p>{resolvedValue}</p>}
  </Await>
</Suspense>;

プロパティ

resolve

resolve プロパティは、useLoaderData から Promise を取得し、データが流入する際に解決します。

<Await resolve={somePromise} />

Promise が解決されるまで、親のエラーバウンダリが表示されます。

<Suspense fallback={<div>読み込み中...</div>}>
  <Await resolve={somePromise} />
</Suspense>

Promise が解決されると、children が表示されます。

children

children は、レンダリングコールバックまたは React 要素であることができます。

<Await resolve={somePromise}>
  {(resolvedValue) => <p>{resolvedValue}</p>}
</Await>

children プロパティが React 要素の場合、解決された値は子ツリー内の useAsyncValue を通じてアクセス可能です。

<Await resolve={somePromise}>
  <SomeChild />
</Await>

import { useAsyncValue } from "@remix-run/react";

function SomeChild() {
  const value = useAsyncValue();
  return <p>{value}</p>;
}

errorElement

errorElement プロパティは、Promise が拒否されたときにエラーバウンダリを表示するために使用できます。

<Await errorElement={<div>ああ！</div>} />

子ツリー内でエラーにアクセスするには、useAsyncError を使用できます。

<Await errorElement={<SomeChild />} />

import { useAsyncError } from "@remix-run/react";

function SomeChild() {
  const error = useAsyncError();
  return <p>{error.message}</p>;
}