Supabase with React Streaming

[CripyIce]

Hi,
I'm trying to implement React Streaming with Supabase typescript library using the following guide from Remix:
https://remix.run/docs/en/1.19.3/guides/streaming#using-defer

This my minimal code attempt:

import { defer, type LoaderArgs } from "@remix-run/cloudflare";
import { Await, useLoaderData } from "@remix-run/react";
import _ from "lodash";
import { Suspense } from "react";
import { createServerClient } from "~/lib/utils";

export const loader = async ({ request, context }: LoaderArgs) => {
  const response = new Response();
  const supabaseClient = createServerClient({ request, response, context });

  const appsPromise = supabaseClient.from("apps").select();

  return defer({ apps: appsPromise });
};

export default function TestPage() {
  const data = useLoaderData<typeof loader>();

  return (
    <Suspense fallback={<p>Loading apps...</p>}>
      <Await resolve={data.apps} errorElement={<p>Error loading apps!</p>}>
        {(apps) => _.toString(apps)}
      </Await>
    </Suspense>
  );
}

For some reason it seems like apps is type of PostgrestFilterBuilder and therefor I can't extract the data out.
Does anyone have experience implementing this with supabase?

[CripyIce]

Finally managed to make it work with the following code:

import { defer, type LoaderArgs } from "@remix-run/cloudflare";
import { Await, useLoaderData } from "@remix-run/react";
import type { PostgrestSingleResponse } from "@supabase/supabase-js";
import type { Tables } from "database.types";
import { Suspense } from "react";
import { createServerClient } from "~/lib/utils";

export const loader = async ({ request, context }: LoaderArgs) => {
  const response = new Response();
  const supabaseClient = createServerClient({ request, response, context });

  const appsPromise = supabaseClient.from("apps").select();

  return defer({ apps: appsPromise.then() });
};

export default function TestPage() {
  const loaderData = useLoaderData<typeof loader>();

  return (
    <Suspense fallback={<p>Loading apps...</p>}>
      <Await
        resolve={loaderData.apps}
        errorElement={<p>Error loading apps!</p>}
      >
        {(apps) => {
          const { data } = apps as PostgrestSingleResponse<Tables<"apps">[]>;
          return data?.map((app) => <div key={app.id}>{app.id}</div>);
        }}
      </Await>
    </Suspense>
  );
}