proven torrent
1.The suspense boundary around the <Await is not triggering. Am i missing something?
I had to extract my prisma query into another function to throw the 404 and also for Remix to solve the promise correctly. Is this the right way?
When using single fetch and returning promises from the loader, how do you now do dynamic metadata? Can i somehow resolve the promise in metafunction, is there an async metafunction versjon?
Streaming: trigger suspense boundary and metadata
vague oxide
This issue is because Prisma queries don't return actual promises
but an object that follows the same interface
proven torrent
i noticed.
vague oxide
when trying to send it from the loader it fails to serialize correctly
the only way to fix that is like you did, move that to a function where you await the Prisma query
for your second question, you can't, if the data is needed on the MetaFunction then it's imporant enough to have to be awaited
proven torrent
the only way to fix that is like you did, move that to a function where you awai...
right. but its still not triggering the suspense!
proven torrent
for your second question, you can't, if the data is needed on the MetaFunction t...
gotcha
so if i need to do some kind of if check to return 404 i always have to extract it to a seperate function. otherwise i cant return it as a promise
from the loader.
vague oxide
so if i need to do some kind of if check to return 404 i always have to extract ...
if you need to return a 404 then you need to await the data, you can't defer it
once you send a 200 response with the promise you can't change the status to 404 anymore after the promise is resolved
proven torrent
if you need to return a 404 then you need to await the data, you can't defer it
but if i dont return 404
vague oxide
usually for deferred data it's better to return data or throw an error or return some object you can use to render an error
proven torrent
pretty sure it doesnt work either way
let me check
cant get the suspense boundary to trigger
vague oxide
I'm trying in your repo and it seems it works for client-side navigations but not for a page reload 🤔
proven torrent
for me it doesnt work when i click the jokes in the list
vague oxide
it works for me when I go from http://localhost:5173/jokes to a joke clicking the permalink
proven torrent
what about sidebar?
vague oxide
seems to work to when going from /jokes to one of the listed jokes
it doesn't work when changing from one joke to another
but that's expected
vague oxide
because of how Suspense works
proven torrent
can you send it to me? what you wrote?
why is it not showing the name and content od the joke though?
for me that happened when i didnt resolve the promise correctly by creating a new function
bc of the prisma promise thing
vague oxide
that's because I made a getJoke function that returns { ok: true, joke } but I was not using it correctly
I made a change to use data, created that getJoke function and put the slow helper inside getJoke so the response is sent immediately but the data is sent later
and I used the location.key from useLocation on the Suspense component so it shows the loading state when going from one joke to another
from what I see in the HTML sent by the server the joke data is being streamed
<div hidden id="S:2">
<script>
window.__reactRouterContext.streamController.enqueue("P29:[{\"_34\":35,\"_28\":36},\"ok\",true,{\"_8\":21,\"_37\":38,\"_12\":13,\"_39\":40,\"_10\":22,\"_41\":42},\"createdAt\",[\"D\",1731793944274],\"updatedAt\",[\"D\",1731793944274],\"content\",\"Why do frontend developers eat lunch alone? They dont know how to join tables.\"]\n");
</script>
<!--$?-->
<template id="B:3"></template>
<!--/$-->
</div>
I think the browser may be buffering the HTML
yeah it's that
I added 4 sequential calls to the slow helper and tried in a Chromium browser and it works
Safari buffer it long enough that you never see the loading state, but Chromium browsers render the HTML immediately with the loading state
proven torrent
I'll check this tomorrow but initially this seems like alot of stuff i need to do just to stream a component.. what is the bottom line here on how to do what i want?
vague oxide
the important part is you send a promise and use Suspense + Await
then the browser may buffer the response
but that's out of control
proven torrent
Yes but my version didn’t work.
which you would expect it to when reading the docs
proven torrent
So, in Next.js whenever a componet has an "await " or "use()" resolving a promise, and you wrap it with suspense, it will suspend while resolving and show that fallback. It also works for prisma-promises directly. Isn't that the expected behavior for the <Await component as well? What is the future plan for this?
vague oxide
In the future RR will support RSC React.use and work the same way