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

Props

`resolve`

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

<Await resolve={somePromise} />

Promise が解決されていない場合、親の Suspense バウンダリーのフォールバックがレンダリングされます。

<Suspense fallback={<div>Loading...</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>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