how can I make Flutter graphql subscription work with ferry package?

Question

I have a graphql api with apollo-server. I tested all queries, mutations and subscriptions with Graphql Playground.

I am developing the client app in Flutter using Ferry package as grapqhl client. All queries and mutations work fine, but subscriptions don't.

When sending a subscription request the websocket connection is established, however the subscription is not started. I tested the subscription on the Graphql Playground and the connection request messages looks like this

Graphql Playground network panel

but with ferry client it get stuck on connection_init

Flutter Web app network panel

var link = WebSocketLink(
      "ws://localhost:4000/graphql",
      initialPayload: {"subscriptionParam": arg},
    );
var client = Client(link: link);
client.request(request).listen((data) {//request is an object from autogenerated class from ferry
      log(data.toString());//never gets here
    }, onError: (error, stack) {
      log("Subscription error: " + error.toString());
    }); 

What is wrong in my code? Help please!

Answer 1

So guys I solved my problem, the issue was related to link not sending Sec-WebSocket-Protocol:graphql-ws on connection request headers. So I change the link initialization to:

final link = WebSocketLink(
      null, //Global.graphqlWsServerUrl,
      autoReconnect: true,
      reconnectInterval: Duration(seconds: 1),
      initialPayload: {"subscriptionParam": arg},
      channelGenerator: () => WebSocketChannel.connect(Uri.parse(Global.graphqlWsServerUrl), protocols: ['graphql-ws']),
    );