Graphql subscriptions and different Sec-WebSocket-Protocol values.

[nielsbasjes]

I'm working on a Spring-Boot + Graphql (i.e. Java) service that offers a subscription and I want to write a Flutter app (to be deployed both as webapp and as Android app) to listen to that subscription and do something with that data.

For over a week I was unable to get even the most basic thing running, yet I have found the reason why it broke.

In the end it turns out to be a mismatch between the value in the Sec-WebSocket-Protocol header used by graphql_flutter (5.1.2) to setup the websocket connection and what the spring-graphql service responds to.

In the end it turns out graphql_flutter (5.1.2) sends the new (correct) value Sec-WebSocket-Protocol: graphql-ws, yet the default implementation of the graphql service did not accept this value and only responded to the older (also correct) Sec-WebSocket-Protocol: graphql-transport-ws.

I was able to fix this by explicitly defining the required subProtocol like this (which was not documented clearly):

  final WebSocketLink websocketLink =
  WebSocketLink(
    'wss://$baseLink',
    subProtocol: GraphQLProtocol.graphqlTransportWs,
    config: const SocketClientConfig(
      autoReconnect: true,
      inactivityTimeout: Duration(seconds: 30),
    ),
  );

Now https://http.dev/ws#sec-websocket-protocol says that this Sec-WebSocket-Protocol can also be a comman separated list of values in order of preference.

But when I try this instead it completely breaks down because apparently the dart code only expects a single value.

    subProtocol: '${GraphQLProtocol.graphqlWs},${GraphQLProtocol.graphqlTransportWs}',

I have a few questions/comments about this:

• Is there a clean way to configure a Flutter app (especially when depending on an external GraphQL api I do not control) to work with both?
• I think this option should be documented more clearly as it solves some very obscure errors people can run into.