OtterSwims996•11mo ago

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..

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

ttt/tic-tac-toe/src/server/api/routers/post.ts at bb0474b64cd463a3a...

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.

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/server/routers/post.ts ...

🏓 tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.

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