import { Await } from "@remix-run/react";
 
<Suspense fallback={<div>Loading...</div>}>
  <Await resolve={somePromise}>
    {(resolvedValue) => <p>{resolvedValue}</p>}
  </Await>
</Suspense>;

Props

`resolve`

resolve プロパティは、useLoaderData から取得したプロミスを受け取り、データがストリーミングされたときに解決します。

<Await resolve={somePromise} />

プロミスが解決されない場合、親のサスペンス境界のフォールバックがレンダリングされます。

<Suspense fallback={<div>Loading...</div>}>
  <Await resolve={somePromise} />
</Suspense>

プロミスが解決されると、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 プロパティは、プロミスが拒否されたときにエラー境界をレンダリングするために使用できます。

<Await errorElement={<div>Oops!</div>} />

エラーは、サブツリー内の useAsyncError を使用してアクセスできます。

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

import { useAsyncError } from "@remix-run/react";
 
function SomeChild() {
  const error = useAsyncError();
  return <p>{error.message}</p>;
}

Props
resolve
children
errorElement