Javascript client websockets subscriptions

[ricardo-valero]

With an existing HotChocolate GraphQL server, how can I use websockets subscriptions with a JS client?
Is there an example of this?

Found this https://github.com/enisdenjo/graphql-ws#urql, am I on the right track?

[PascalSenn]

@RicardoValero95 We do not have an example of web sockets and a JS client on hand, but we implement the most common protocol so you should be fine to use hot chocolate with any JS client

[matt-psaltis]

TLDR: Apollo is where its at - Use the Apollo client library at least for subscriptions. https://formidable.com/open-source/urql/docs/advanced/subscriptions/#setting-up-subscriptions-transport-ws

One of the problems we're seeing with the client side websocket libraries is the variety of values in the Websocket subprotocol field Sec-WebSocket-Protocol.

HotChocolate currently accepts websocket connections when the value of this header is graphql-ws as per: https://github.com/ChilliCream/hotchocolate/blob/c1eb36cf3542572372847c5e38f4bc349bc22bfa/src/HotChocolate/AspNetCore/src/AspNetCore/Subscriptions/WebSocketConnection.cs#L14

If you're using URQL, the correct Websocket configuration is this one https://formidable.com/open-source/urql/docs/advanced/subscriptions/#setting-up-subscriptions-transport-ws

This uses Apollo's Subscriptions transport https://github.com/apollographql/subscriptions-transport-ws
This configuration will correctly set the Sec-WebSocket-Protocol header and your connection should work.

I'm using URQL with this approach against latest Hotchocolate 11.2.2 packages as I type :D So can confirm working.

Now the problem comes in for other libraries. Specifically:

https://github.com/enisdenjo/graphql-ws - You would think that this library would use the name of the repo as the subprotocol name but it doesn't. The subprotocol name is graphql-transport-ws

Additionally, I've run into issues working with Overmind: https://github.com/cerebral/overmind

Which uses Absinthe & Phoenix under the hood.
https://github.com/absinthe-graphql/absinthe_phoenix

Going forward I'd love to see changes to Hotchocolate so that the subprotocols can be specified in config (with the big caveat that there's isn't a ton of additional work to support these other websocket clients. My naive understanding is this is purely a headers incompatibility).

If anyone stops by this issue, I'd personally love to know other solutions / packages that either do or don't work currently with the current Hotchocolate implementation.

Hope this info helps people!