How to defer with call to Prisma in loader

[JasonWeise]

Hi All

I am trying to defer loading a large(ish) dataset into my page with defer in the loader yet I seem to always get back undefined.

This works without defer but the page takes ages to appear due to the amount of data coming back into users:

export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) => {
    const users = await prisma.user.findMany()
    return json({users})
}

.... So I want to use defer and populate the datagrid when the users come back from defer, but this never returns any data:

export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) => {

    const users =  prisma.user.findMany()

    return defer( {users} );
}

I have read somewhere that Prisma doesn't really return a promise correctly (not sure how true that is) but I have even tried this without success:

export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) => {

   return defer( {users: prisma.user.findMany().then()} );
}

even

export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) => {

   return defer( {users: prisma.user.findMany().then((users) => users} );
}

I am sure I am just using defer with Prisma incorrectly, but the "user" in useLoaderData is aways undefined when using defer.

Thanks in advance as always.

[kiliman]

As you point out, PrismaPromise is not a true Promise, so you need to call .then() and return the promise via defer.

useLoaderData will return the object and users should be a Promise that you pass to <Await resolve>.

export async function loader() {
  const users = prisma.user.findMany().then();
  return defer({ users });
}

export default function Component() {
  const { users } = useLoaderData<typeof loader>();
  return (
    <>
      <h2>Deferred Data</h2>
      <Suspense fallback={<div>Loading...</div>}>
        <Await resolve={users}>
          {(users) => <pre>{JSON.stringify(users, null, 2)}</pre>}
        </Await>
      </Suspense>
    </>
  );
}

[JasonWeise]

Hey @kiliman not sure what I was doing wrong but your solution has now allowed me to get users into the page with defer.
Now my only problem is how to get those deferred users into my datagrid.

My datatable looks like the following, where users is the records that get pushed in.
I was hoping to just have users populate into here when the promise is fulfilled but it doesn't seem to work.
If I Suspense, Await, it does work but the DataTable remains unshown on the page until users has filled.

I guess my question is, using defer, how can I push this deferred user data into my datatable or is this not really the purpose of defer?

 <DataTable
            striped={"odd"}
            records={users}
            columns={[{ accessor: 'email' , title:'Email'},
                {
                    accessor: 'actions',
                    width: '0%',
                    title: <Box mx={6}></Box>,
                    textAlign: 'center',
                    render: () => (
                        <Group gap={4} justify="center" wrap="nowrap">
                            <ActionIcon
                                size="sm"
                                variant="subtle"
                                color="red"
                                onClick={(e: React.MouseEvent) => {
                                    e.stopPropagation();
                                    setDeleteUserOpened(true)
                                }}
                            >
                                <IconTrash size={16} />
                            </ActionIcon>
                        </Group>
                    ),
                },]}

[kiliman]

Not sure I follow. defer uses <Suspense> to render the fallback until the promise is resolved (ALL the data is streamed down). It doesn't chunk it up.

You can use an empty grid skeleton as your fallback, return a subset of users, and perhaps perform some client fetches to request more data.

[JasonWeise]

Thanks @kiliman for your patience, I had misunderstood the best way to do the Suspense / Await with the datatable.
I just created a "isLoading" prop in the datatable component and set it to true with the fallback.

Really appreciate you taking the time to point me in the right direction.