deferredLoaderResponseOrThrow implementation

[dshunfen]

I'm working with Remix.run and trying to implement the streaming version of the loaderResponseOrThrow helper function here.

I got this far but somewhat stumped on getting the typing right:

const deferredLoaderResponseOrThrow = async <T extends Result<unknown>>(
  result: Promise<T & { data?: { response?: Response } }>,
  opts?: RequestInit,
): Promise<
  TypedDeferredData<{
    critical: (T & { data?: { response?: Response } }) | undefined
    result: Promise<T & { data?: { response?: Response } }>
  }>
> => {

  return defer(
    {
      critical: critical,
      result,
    },
    {
      status: 200,
      ...opts,
    },
  )
}

[gustavoguichard]

Hey @dshunfen , let me get this straight. Do you want the critical to be data that will be awaited on the loader and result to be passed as a promise?

[dshunfen]

After editing the above, it should be a little clearer. The use case is:

export async function loader({
  params,
}: LoaderFunctionArgs) {
  // existing code
}

export default function Product() {
  const { product, reviews } =
    useLoaderData<typeof loader>();
  return (
    <>
      <ProductPage data={product} />
      <Suspense fallback={<ReviewsSkeleton />}>
        <Await resolve={reviews}>
          {(reviews) => <ProductReviews data={reviews} />}
        </Await>
      </Suspense>
    </>
  );
}

I believe every item in the object should be typed as it's own promise. It's probably not as complicated as I'm imagining it, but I'm coming from a Python background.