Streaming with server components
Context:
- I am using the
queryClient.prefetchQuery() method from the advanced-ssr.md guide explained here.
- I don't await the prefetch
- I use the shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) ||.state.status === 'pending' setup, so streaming is "enabled".
- I use useSuspenseQuery inside my component
Everything is working as expected, when we have successful responses from our API.
When we have 400, 404 or 500 status code responses, the pending query fails and I get the following the following two error message:
- A query that was dehydrated as pending ended up rejecting -> This error message is shown, because I am redacting the error messages.
- Switched to client rendering because the server rendering errored.
My questions are:
1. This is probably expected behaviour when using streaming, right ?
2. The switching to client rendering should not cause any issues ?
3. Is this approach and behaviour something you would recommend for apps, or should we rather avoid streaming ?
Thank you for the help, much appreciated!12 Replies
extended-salmonOP•2mo ago
I also found out that in a production deployment, the user gets the following error in the browser console:
conscious-sapphire•2mo ago
I think if there's an error on the server during streaming, react will retry on the client. but I wouldn't expect any errors to show up in the console. @Ephem ?
fascinating-indigo•2mo ago
Hi Martin! Yes, the way React handles errors during SSR is to retry that Suspense boundary on the client, but I also don't expect this message to show up, I haven't seen it before. 🤔
What framework and version are you using and what version of React?
There is a known issue that has been around forever where we get
unhandledPromiseRejection errors outside of React Query's normal lifecycle. Might be related and by pure chance I happen to be looking at that one today. 🙂
And to answer your questions clearly:
1. This is probably expected behaviour when using streaming, right ?Yes, but not the uncaught error console log.
2. The switching to client rendering should not cause any issues ?No, this is actually a great feature, often the retry on the client might succeed, so we get graceful degradation.
3. Is this approach and behaviour something you would recommend for apps, or should we rather avoid streaming ?Streaming+Suspense is still a bit experimental, we do have a few known bugs I'm trying to fix. That said, the experience can be really good so I think it comes down to the kind of app you are building. 🙂
extended-salmonOP•2mo ago
Thanks so much for the detailed explanation and insights — really appreciate you taking the time to clarify all that! 🙏
I’ll prepare a simple reproducible example and share it.
fascinating-indigo•2mo ago
Hi @Martin , i am getting the same error as you on my browser console (only production) - did you fix it?
Error: Minified React error #419; visit https://react.dev/errors/419 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #419 – React
The library for web and native user interfaces
fascinating-indigo•2mo ago
I did some testing just now and I'm getting the 419 too in the prod build. Either that's a recent React error, or I've just become blind to it in the past. It does seem to be related to the uncaught error I'm working on. Still not exactly sure where it's coming from or how to fix it but will keep chasing.
Good news, I think I found it. I'll work on a fix. 🙂
fascinating-indigo•2mo ago
thanks @Ephem ! Yeah it is very weird, i have not seem it before. And it only appears on production.
extended-salmonOP•2mo ago
I prepared this example with a simple query that always fails on server and succeeds on the client: https://github.com/martines3000/tanstack-query-hydration-error
Thank you!
fascinating-indigo•2mo ago
PR is up: https://github.com/TanStack/query/pull/9752
You can try the preview snapshot with
npm i https://pkg.pr.new/@tanstack/react-query@9752GitHub
Fix unhandled promise rejections during de/rehydration of pending q...
🎯 Changes
This PR adds two .catch(noop) to handle previously unhandled promise rejection errors when dehydrating and hydrating promises, which happens when de/rehydrating pending queries.
The erro...
fascinating-indigo•2mo ago
I'll just verify this in one of my projects and aim for a quick release after that
Hm, good/bad news. While it does get rid of the unhandled promise rejection error, it does not solve the 419 React error.
We do need to rethrow whatever error we get in
useSuspenseQuery, React sees that and retries on the client and seemingly has started logging that error when it does. Not sure there's a way around that.
Not a huge deal, just a bit annoying. 🙁
Okay, fix for the unhandled error is out in 5.90.3 🙂extended-salmonOP•2mo ago
Thanks for the quick help and explanation!
fascinating-indigo•2mo ago
Thanks!