TTC
Theo's Typesafe Cult•12mo ago
OtterSwims996

Unable to set up a client side subscription to a trpc route that supports websockets

I wrote the code on the client side here to query the subscription: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/pages/index.tsx#L47-L51 and this is the matching backend code that should give the right data back: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/server/api/routers/post.ts#L70-L83 I tried following the directions on this blog post here: https://medium.com/@lada496/trpc-102-subscription-web-socket-d81b8962a010 And i got the code snippets for setting up the server and client side code from this example project here: client: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/077367508a7dcda504170b48bc7b6c65457f90c6/src/pages/index.tsx#L175-L180 server: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/077367508a7dcda504170b48bc7b6c65457f90c6/src/server/routers/post.ts#L122-L132 As you can see, its a pretty simple proof of concept just to ensure that data is being passed from the server to the client In order to set up the socket server, which runs on port 3001 alongside the main server port 3000 for the npm runtime i followed this guide: https://medium.com/@lada496/trpc-102-subscription-web-socket-d81b8962a010 It involves setting up the client and server side subscriptions which i linked above, and then also creating the websocket server: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/server/wss.ts and setting up the trpc client to use the websocket : - https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/utils/api.ts#L19-L25 -https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/utils/api.ts#L58 websocket connects, but gets no response.. related threads: https://discord.com/channels/966627436387266600/1183467876510863381/1195421283702276187
Medium
tRPC 102: Subscription/Web Socket
This is my memo when I implemented a subscription with tRPC along with the official documents. I also referred to the code example provided…
GitHub
examples-next-prisma-websockets-starter/src/server/routers/post.ts ...
🏓 tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
GitHub
ttt/tic-tac-toe/src/server/api/routers/post.ts at bb0474b64cd463a3a...
Contribute to sumanthneerumalla/ttt development by creating an account on GitHub.
GitHub
ttt/tic-tac-toe/src/pages/index.tsx at bb0474b64cd463a3aaa6a2230598...
Contribute to sumanthneerumalla/ttt development by creating an account on GitHub.
GitHub
examples-next-prisma-websockets-starter/src/pages/index.tsx at 0773...
🏓 tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
No description
Solution:
I have been able to fix this issue by using a function to return the correct link in the links array. It seems that the links are something that are mainly evaluated on the client side, and wsLink as well as httpBatchLink are "terminating links" which means that we cannot consecutively put a wslink after a httpBatchLink or vice versa. I borrowed a code snippet from this example project which returns the right link based on the browser having a window. ...
GitHub
Cant create a wslink · Issue #333 · apollographql/subscriptions-tra...
Hi, I am trying to implement subscriptions from a GraphiQL server. Schemas, resolvers, and the server is done and appears to be working. (I got no issues with the subscriptions from the graphiql su...
GitHub
examples-next-prisma-websockets-starter/src/utils/trpc.ts at c666de...
🏓 tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
Jump to solution
10 Replies
OtterSwims996
OtterSwims996OP•12mo ago
I would like to note that the other endpoints work, i can see that sending data to the server through a regular mutation query works just fine and i can print out the input on the backend. Its just that: - my events dont seem to be triggering the event listener that i setup on the websocket subscription endpoint - the client gets two hydration errors upon querying the subscription endpoint
OtterSwims996
OtterSwims996OP•12mo ago
screenshot of the mutation query working fine:
No description
OtterSwims996
OtterSwims996OP•12mo ago
OtterSwims996
OtterSwims996OP•12mo ago
I looked more closely at the errors i was seeing in the console, and this is what i see: 
TRPCClientError: Subscriptions should use wsLink
    at TRPCClientError.from (webpack-internal:///./node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:44:16)
    at eval (webpack-internal:///./node_modules/@trpc/client/dist/httpUtils-b9d0cb48.mjs:139:81)
TRPCClientError: Subscriptions should use wsLink
    at TRPCClientError.from (webpack-internal:///./node_modules/@trpc/client/dist/TRPCClientError-38f9a32a.mjs:44:16)
    at eval (webpack-internal:///./node_modules/@trpc/client/dist/httpUtils-b9d0cb48.mjs:139:81)
OtterSwims996
OtterSwims996OP•12mo ago
i think i know what is wrong, i have to do some configuration around the links used in api.ts, it is something that is part of trpc that i haven't really grasped till now: https://github.com/apollographql/subscriptions-transport-ws/issues/333 I have to figure out how best to implement the link array and use a split if necessary, because this link array seems to be used both by server and client So depending on where it's evaluated I need to be returning either wslink or batch link I have to take into account ssr as well..
GitHub
Cant create a wslink · Issue #333 · apollographql/subscriptions-tra...
Hi, I am trying to implement subscriptions from a GraphiQL server. Schemas, resolvers, and the server is done and appears to be working. (I got no issues with the subscriptions from the graphiql su...
Solution
OtterSwims996
OtterSwims996•12mo ago
I have been able to fix this issue by using a function to return the correct link in the links array. It seems that the links are something that are mainly evaluated on the client side, and wsLink as well as httpBatchLink are "terminating links" which means that we cannot consecutively put a wslink after a httpBatchLink or vice versa. I borrowed a code snippet from this example project which returns the right link based on the browser having a window. https://github.com/trpc/examples-next-prisma-websockets-starter/blob/c666de6367d7449d4108e5e384da043c4f93a5d5/src/utils/trpc.ts#L21-L43 Its also possible to return the right link based on the operation type as is done here: https://github.com/apollographql/subscriptions-transport-ws/issues/333
GitHub
Cant create a wslink · Issue #333 · apollographql/subscriptions-tra...
Hi, I am trying to implement subscriptions from a GraphiQL server. Schemas, resolvers, and the server is done and appears to be working. (I got no issues with the subscriptions from the graphiql su...
GitHub
examples-next-prisma-websockets-starter/src/utils/trpc.ts at c666de...
🏓 tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
NicoVogel
NicoVogel•11mo ago
Even though I have looked at your code forever, I can't seem to figure out why it does not work on my end (getting the same error as you described initially). I created a small repo that only contains the websocket code that does not work. https://github.com/NicoVogel/t3-websocket-minimal After a good break, I will go over your examples again, but some help would be appriciated.
GitHub
GitHub - NicoVogel/t3-websocket-minimal
Contribute to NicoVogel/t3-websocket-minimal development by creating an account on GitHub.
NicoVogel
NicoVogel•11mo ago
it was basically jokingly easy getting it to work with the page router -> https://github.com/NicoVogel/t3-minimal-websocket-page-router So, my issue is somewhere with the experimental app router
GitHub
GitHub - NicoVogel/t3-minimal-websocket-page-router
Contribute to NicoVogel/t3-minimal-websocket-page-router development by creating an account on GitHub.
NicoVogel
NicoVogel•11mo ago
well... I fixed the issue with the app router after reading trough here: https://github.com/trpc/trpc/issues/3297 TLDR: I did not see that there was already a terminating link before registering the wsLink. upside: now there are two minimal projects for others to see how to get it working
GitHub
feat: Support RSC & App Layouts · Issue #3297 · trpc/trpc
Describe the feature you'd like to request We should make official support for Next 13 app layouts & RSC. Describe the solution you'd like to see Being able to transparently use tRPC id...
OtterSwims996
OtterSwims996OP•10mo ago
Hi Nico, apologies for the late response. I took a break from working on typscript so i didn't check this thread. Glad you were able to get it working with the page router! Were you able to get clerk working with sockets? I was running into issues when i tried it myself with my page router setup, sharing some details from a thread i created on the clerk support channel here: https://discord.com/channels/856971667393609759/1200260793447485610/1204980669407694948
Want results from more Discord servers?
Add your server