OtterSwims996
OtterSwims9965mo 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.
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
2 Replies
OtterSwims996
OtterSwims9965mo ago
it seems that httpbatchlink is a terminating link that is causing my request to never be routed to the wslink that is in my links array: https://trpc.io/docs/client/links#the-terminating-link so i will have to use splitlink or some conditional logic like i see is used here in this sample project https://github.com/trpc/examples-next-prisma-websockets-starter/blob/077367508a7dcda504170b48bc7b6c65457f90c6/src/utils/trpc.ts#L18-L40
GitHub
examples-next-prisma-websockets-starter/src/utils/trpc.ts at 077367...
🏓 tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
Links Overview | tRPC
Links enable you to customize the flow of data between the tRPC Client and Server. A link should do only one thing, which can be either a self-contained modification to a tRPC operation (query, mutation, or subscription) or a side-effect based on the operation (such as logging).
Solution
OtterSwims996
OtterSwims9965mo 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.