Cannot initiate connection to backend

[MagedAlNaamani]

I face an issue that my request not reach to backend... Can you help in this?

also the same subscription work in Apollo graphql website.

 import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class TrackingScreen extends StatefulWidget {
  const TrackingScreen({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _TrackingScreenState();
  }
}

class _TrackingScreenState extends State<TrackingScreen> {
  @override
  Widget build(BuildContext context) {
    final httpLink = HttpLink(
      'https://......',
    );

    final authLink = AuthLink(
      getToken: () async => 'Bearer token',
    );

    var link = authLink.concat(httpLink);

    final websocketLink = WebSocketLink(
      'wss://......',
      config: const SocketClientConfig(
        inactivityTimeout: Duration(seconds: 30),
        delayBetweenReconnectionAttempts: Duration(seconds: 10),
      ),
    );

    link = Link.split(
      (request) => request.isSubscription,
      websocketLink,
      link,
    );

    final client = ValueNotifier<GraphQLClient>(
      GraphQLClient(
        cache: GraphQLCache(),
        link: link,
      ),
    );

    return GraphQLProvider(
      client: client,
      child: CacheProvider(
        child: Subscription(
          options: SubscriptionOptions(
            document: gql(
                r"""subscription Tracking($frequencyInSeconds: Int!, $packageNumber: Int!) {
                  tracking(frequencyInSeconds: $frequencyInSeconds, packageNumber: $packageNumber) {

                    timestamp
                  }
                }"""),
            variables: {
              "frequencyInSeconds": 3,
              "packageNumber": 10,
            },
            operationName: 'Tracking',
          ),
          builder: (result) => result.isLoading
              ? const Text('Loading...')
              : Text(result.data.toString()),
        ),
      ),
    );
  }

[vincenzopalazzo]

we need an example for this!

You can use our endpoint https://api.chat.graphql-flutter.dev/graphql

[MagedAlNaamani]

Hi @vincenzopalazzo

Yes I try it with your endpoint but it the same issue keep show loading only.

[vincenzopalazzo]

if you push the example that you try somewhere I can reproduce it, because I'm currently use in production the client and my code works

[MagedAlNaamani]

Hi

Here is the full code exactly.

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class TrackingScreen extends StatefulWidget {
  const TrackingScreen({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _TrackingScreenState();
  }
}

class _TrackingScreenState extends State<TrackingScreen> {
  @override
  Widget build(BuildContext context) {
    final httpLink = HttpLink(
      'https://api.chat.graphql-flutter.dev/graphql',
    );

    final authLink = AuthLink(
      getToken: () async => 'Bearer token',
    );

    var link = authLink.concat(httpLink);

    final websocketLink = WebSocketLink(
      'wss://api.chat.graphql-flutter.dev/graphql',
      config: const SocketClientConfig(
        inactivityTimeout: Duration(seconds: 30),
        delayBetweenReconnectionAttempts: Duration(seconds: 10),
      ),
    );

    link = Link.split(
      (request) => request.isSubscription,
      websocketLink,
      link,
    );

    final client = ValueNotifier<GraphQLClient>(
      GraphQLClient(
        cache: GraphQLCache(),
        link: link,
      ),
    );

    return GraphQLProvider(
      client: client,
      child: CacheProvider(
        child: Subscription(
          options: SubscriptionOptions(
            document: gql("""subscription ChatCreated {
              chatCreated {
                id
                description
                name
              }
            }"""),
          ),
          builder: (result) => result.isLoading
              ? const Center(child: Text('Loading...'))
              : Center(child: Text(result.data.toString())),
        ),
      ),
    );
  }
}

[MagedAlNaamani]

@vincenzopalazzo

check this screenshot of what is printing in the debug console.

[vincenzopalazzo]

Mh I think you need to change the protocol.

Check how I do this https://github.com/zino-hofmann/graphql-flutter/pull/1204

[MagedAlNaamani]

Hi @vincenzopalazzo

The issue fixed after upgrade to graphql_flutter 5.1.1-beta.4 and add subprotocol to Graphql-transport-ws.

[vincenzopalazzo]

Coo! :) the beta is not so reckless is it?