Combining graphql-ws with Apollo on the client side with single HTTP stream.

[AaronNGray]

@enisdenjo - I am wondering how to go about combining graphql-ws and HTTP streams on the client side.

I have a working example of subscriptions-transport-ws with Apollo 3.0 :-

https://github.com/AaronNGray/fullstack-apollo-3.0-subscription-example

And hopefully got graphql-ws server side code in place :-

https://github.com/AaronNGray/fullstack-apollo-graphql-ws-subscription-test/blob/main/server/src/index.ts

I am unsure on how to go about creating a graphql-ws client compatible with Apollo and with a single combined HTTP stream.

But have put a provisional client in place :-

https://github.com/AaronNGray/fullstack-apollo-graphql-ws-subscription-test/blob/main/client/src/index.js

that obviously does not work and comes up with the following error :-

WebSocket protocol error occured. It was most likely caused due to an unsupported subprotocol "graphql-ws" requested by the client. graphql-ws implements exclusively the "graphql-transport-ws" subprotocol, please make sure that the client implements it too.

Is there an existing way of doing these both or either of these two things :-

• A single HTTP stream
• Using with Apollo Client

Ideally there would be a package that would provide compatibility between apollo-client and graphql-ws.

[enisdenjo]

Hey there! I dont quite understand by what you mean by "a single HTTP stream", can you elaborate a bit more on that?

You can indeed use graphql-ws with Apollo's client. Looking at your client example here, you're actually using the apollo-link-ws (that uses subscriptions-transport-ws) to create a WebSocketLink which is exactly why you're getting the server error you shared. The sub_client is completely unused... Please read the "Client usage with Apollo" recipe.

[AaronNGray]

"a single HTTP stream" passing Queries and Mutations over HTTP and Subscriptions over WebSockets.

Your above example gives me the WebSocketLink to do that in the same ways as my subscriptions-transport-ws example :-

https://github.com/AaronNGray/fullstack-apollo-graphql-ws-subscription-test/blob/main/client/src/index.js

Many thanks !

[enisdenjo]

"a single HTTP stream" passing Queries and Mutations over HTTP and Subscriptions over WebSockets.

Ah ok, I follow.

Your above example gives me the WebSocketLink to do that in the same ways as my subscriptions-transport-ws example

No, your example is not the same as suggested. Please remove the apollo-link-ws library completely and implement the WebSocketLink as described in the "Client usage with Apollo" recipe, then use it to instantiate the wsLink.

[AaronNGray]

@enisdenjo Yes that is what I was saying.

Now I have attempted to implement what you said and came up with a compile time error :-

• CloseEvent is a type, an interface, and not a value, or class.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/ws/index.d.ts#L261

Here's a repo with the code :-

https://github.com/AaronNGray/apollo-client-graphql-ws

[enisdenjo]

Again not like the recipe... 😄

Remove the import { CloseEvent } from 'ws';. The Apollo client is expected to run in the browser and the browser has the CloseEvent in the global object.

[AaronNGray]

I have a superficially working repo with commented out CloseEvent error case code, here :-

https://github.com/AaronNGray/fullstack-apollo-graphql-ws-subscription-test