Streaming with drizzle

[nothumbee]

I am trying to stream data with suspense and according to docs, I should simply return promise.

So I am using drizzle in my loader and I simply return the promise (supposedly) like this:

const coursesPromise = db.query.events.findMany({ ...

(instead of awaiting it like this const coursesPromise = await db.query.events.findMany({ ...)

In my component I use it like this:

        <Suspense fallback={<div>Loading...</div>}>
          <Await resolve={coursesPromise}>
            {(courses) => {
              console.log("courses", courses); <=== here the data is weird, see screenshot below
              return (
                <div>
                  <h2>Courses</h2>
                  <ul>
                    {courses?.map?.((course) => (
                      <li key={course.id}>{course.title}</li>
                    ))}
                  </ul>
                </div>
              );
            }}
          </Await>
        </Suspense>

I was just wondering if its a bug or how to do it properly ? Thanks in advance.

[rub1e]

This tripped me up as well - you need to .execute() your query in the loader. Otherwise you just end up with a query builder object.