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](https://cdn.answeroverflow.com/1197267137702678610/GEB71lJW0AA1_jm.png)
Solution:Jump to 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.
10 Replies
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
screenshot of the mutation query working fine:
![No description](https://cdn.answeroverflow.com/1197277457666023476/image.png)
link to mutation query: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/pages/index.tsx#L35-L45
GitHub
ttt/tic-tac-toe/src/pages/index.tsx at bb0474b64cd463a3aaa6a2230598...
Contribute to sumanthneerumalla/ttt development by creating an account on GitHub.
I looked more closely at the errors i was seeing in the console, and this is what i see:
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
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.
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.
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.
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 workingGitHub
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...
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