kal
kal•5mo ago

Context with trpc ws client

Hello! I've implemented trpc to my nextjs 14 app router project, along with trpc socket subscriptions. I recently started making use of trpc context and implemented an asyncrhinous check to my session handler in order to append session information to my trpc context. This all works fine for the majority of my trpc functionality (non websocket stuff), however my clients are unable to establish a websocket connection to the server as every time the initial upgrade request is sent, the server 500 errors due to the added context initialisation. The error seems to be caused because some server component functionality ( cookies() ) is called during the call to fetch session information during context initialisation for the socket. Why does this cause an error when initliasing the trpc websocket client and not when making a standard trpc request? I should note that I followed this example to initialise my seperate websocket server. ( ws server is hosted on port 3001, main next app is on port 3000, could this possible be a cors issue?) https://github.com/trpc/examples-next-prisma-websockets-starter/blob/main/src/server/wssDevServer.ts I've attached most of my core trpc initialisation code. any help would be greatly appreciated, I've been toying with this issue for days now and it is really hindering my project's development. Thanks.
No description
No description
No description
No description
No description
9 Replies
kal
kal•5mo ago
console when app is running (sockets connect then instantly disconnect. Notice 'creating TRPC context' is logged, but 'created trpc context!' is not, meaning error occurs in 'getServerSession' call.) Also attached is 'getServerSession' function.
No description
No description
kal
kal•5mo ago
I think the issue is that the cookies header is not being sent with the socket request
kal
kal•5mo ago
error also occurs if I only make a call 'headers()' (another server side only function) in my context creation function. I receive a very similar error as a result of doing so. See attached. I also tried to use 'redirect' another server function. This also caused an error. For this reason I think the error is definitely being caused because somehow we are calling the createTRPCContext function from within a client component?
No description
No description
No description
roopaish
roopaish•4mo ago
I am also stuck with the same problem with no lead.
BeBoRE
BeBoRE•4mo ago
WebSocket connections do not go through NextJS, you cannot use next/headers within that context
kal
kal•4mo ago
How would one go about identify who a socket belongs to then? If not headers, as typically one would check for an auth cookie header or something along those lines.
BeBoRE
BeBoRE•4mo ago
Still the request headers, but now from the websocket connection request object
BeBoRE
BeBoRE•4mo ago
You could take a look at my repo https://github.com/BeBoRE/ei-noah-bot it uses an outdated version of lucia auth tho and ws connetions are proxied
GitHub
GitHub - BeBoRE/ei-noah-bot: De officiële Discord Bot voor de Sweat...
De officiële Discord Bot voor de Sweaty GG Chat. Contribute to BeBoRE/ei-noah-bot development by creating an account on GitHub.
kal
kal•4mo ago
thanks bud đź‘Ś
More Posts
Cannot use usemutation in my nextjs/t3 projectI have this code ` const mutation = api.auth.addaccount.useMutation(); const handleLogin = async Has anyone passed supabase user to the tRPC context in Expo?I am trying to pass the logged in user to the context of tRPC. To be able to use it in the routers aCould we PLEASE get more docs on subscriptions / observables?They sem to me extremely useful and important and there is just about no documentation on them at alAdding trpc.useQuery hook to Next.js page with react-hook-form prevents stateful refresh.Hi, I'm new to tRPC so apologies if I've worded this poorly. I've got a page with a form managed by React-query options not available in trpc/react-query?I'm not sure if I'm misunderstanding something, but i'm trying to use the `keepPreviousData` option Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]Good Morning I am getting the above error when updating to the latest version of NextJS - 14.1.1 thrCan I create custom terminating links?There are cases where a user of my application is offline and can't have access to the server. I'd lI want to use tRPC but I don't want a serverCan I have tRPC exclusively run on the client? I don't want to have any servers. The architecture a“Integrating Drizzle Prepared Statements with tRPC Context”I’m currently using tRPC and Drizzle for my project. In tRPC, we generally place the database driverI have an actual data returned, but I get 404 spammed in the consoleIt's a bit weird, I have the data returned but I also get 404 at the same time. Here is usage on th