graphql-flutter subscriptions in flutter connectivity issue

Question

I am new to flutter development but I have good experience in nodejs and graphql. I am trying to consume the subscription widget of graphql-flutter and update the changes. but the connection is not being established. But I could use the query and Mutation widget and get the results. The examples provided by the graphql-flutter team is 2 years old and same with https://hasura.io/ documents. Can someone help me providing the latest examples or samples.

graphql-flutter:^5.0.0

If additional infos needed please comment below.

Thanks in advance

Answer 1

I made a class that I use with graphql but it'll be able to work with graphql-flutter but passing the client to

 return GraphQLProvider(
    client: Services().graphQL.client, // just how I have my services set up
    child: MaterialApp(
      title: 'Flutter Demo',
      ...
    ),
  );

class:

class GraphQL {
  static final HttpLink _httpLink = HttpLink(environment[envMode]!['server']);

  static WebSocketLink _wsLink(String token) => WebSocketLink(
        environment[envMode]!['webSocket'],
        config: SocketClientConfig(
          inactivityTimeout: const Duration(hours: 1),
          initialPayload: {
            'Authorization': 'Bearer $token',
          },
        ),
      );

  Link _splitLink(String token) => Link.split(
        (request) => request.isSubscription,
        _wsLink(token),
        _httpLink,
      );

  GraphQLClient client(String token) {
    return GraphQLClient(
      link: AuthLink(getToken: () async => 'Bearer $token')
          .concat(_splitLink(token)),
      cache: GraphQLCache(
        store: HiveStore(),
      ),
    );
  }

  Future<void> initHive() async {
    return await initHiveForFlutter();
  }
}

The environment and envMode come from a config file that has gets its data from an env file to keep manage env and secrets.