'Invalid response or stream interrupted' when using T3+TRPC with Clerk
Hello, I've encountered strange error when trying to use trpc's
useSuspenseQuery while having clerk authentication implemented.
When I try to call useSuspenseQuery, I get Invalid response or stream interrupted error. On client I get Uncaught Switched to client rendering because the server rendering errored. The full terminal output can be seen in this Github Gist.
As I was putting together minimal reproducible example, I found out that this doesn't occur without Clerk. This led me to suspect it has something to do with Clerk's middleware, but I have no idea how to even start to debug this.
Here is the minimal reproducible example:
- Github repo
- StackBlitz
You'll need to add NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY to .env to run this.
Strangely, if I add api.[route].prefetch() to server component for all of the calls, this error doesn't occur.
In the example I shown why this is not suitable solution. I first load posts, and based on post data I load author data. To prefetch data structured like this, I'd have to await the posts query, to then be able to prefetch author data. This is not ideal, as it blocks first render.
Does anyone know what is this about? Or where to even begin to look to debug this?0 Replies