Juraj98
TTCTheo's Typesafe Cult
•Created by Juraj98 on 7/31/2024 in #questions
'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?1 replies
TTCTheo's Typesafe Cult
•Created by Juraj98 on 6/22/2024 in #questions
What’s the correct way to setup simple node+typescript app in turborepo?
Hello, I’m working on a Next project that needs a websocket server for some realtime features. I’m having trouble with setting up build process for the node server inside turborepo.
Scenario
While the project is a bit more complicated, I’ll use a realtime chat as an example of a feature I want to build for simplicity.
I have a next application with trpc and drizzle-orm connecting to a postgres DB. I imagine the architecture such as:
- Next.js loads all chat messages from trpc endpoint.
- When user sends a message to a chat, it’ll be sent to the websocket server. This websocket server saves the message into the DB, plus broadcasts it to all other clients
- The client receives the message from websocket server and adds it to the trpc cache. This way I eliminate a need to refetch all the messages again.
I created a monorepo that looks like this:
I based it off of create-t3-turbo.
packages/api contains trpc and packages/db contains the drizzle-orm code.
The problem
At first, I thought setting up the node server will be simple. I though I’d just use tsc to transpile the code and node dist/main.js to run it. But this doesn’t include code from other packages in the monorepo.
Then I thought about including bundler - I tried adding esbuild. This kind of works, at least the project is being bundled into one big dist/main.cjs file, but now I feel like I’m building the code twice. Is this correct approach, or am I missing something?1 replies