How to consume graphql subscriptions with flutter?

Question

I am using the flutter_graphql plugin and it is working fine for queries and mutations but I am facing the problem with subscriptions.

Following is the code that I have tried out but it is just printing the loading not even hitting the server.

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

void main() async {
  socketClient = await SocketClient.connect('ws://address',
    headers: {
      'authorization': "accessTokenHere"
    }
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final title = 'WebSocket Demo';
    return MaterialApp( 
      title: title,
      home: MyHomePage(
        title: title,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, @required this.title})
      : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = TextEditingController();

  static String operationName = "notification";
  String query = """subscription $operationName{
    notification{
      messageCount
    }
  }""".replaceAll('\n', ' ');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Form(
              child: TextFormField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Send a message'),
              ),
            ),
            Subscription(
              operationName,
              query,
              variables: {},
              builder: ({
                bool loading,
                dynamic payload,
                dynamic error,
              }) {
                print(loading);
                print(payload);
                print(error);
                if (payload != null) {
                  return Text(payload['requestSubscription']['requestData']);
                } else {
                  return Text('Data not found');
                }
              }
            ),
          ],
        ),
      ),
    );
  }

}

I want to receive the message count from the server using subscriptions to provide notification to the user.

shouldn't the line `return Text(payload['requestSubscription']['requestData']);` be `return Text(payload['notification']['messageCount']);`. Also you can check if your server is even sending subscription or not using the method `socketClient.subscribe(SubscriptionRequest(operationName,query,{}))).listen((data){print(data);});` in your initState. — Ryosuke, Mar 24 '19 at 12:50
Just find out the bug in this library, Just open the subscription.dart file by ctrl+click on Subscription. In that file, if you analyze it is easy to see that socketClient variable is null. So just define it in initState() function as shown in the docs. Restart your app. And it work like a charm. — Hardik Modi, Mar 29 '19 at 13:32
@HardikModi can you give me full working example i don't know how to implement with my flutter project it will be very help full thanks in advance. — Parth Bhanderi, Nov 03 '19 at 04:00
@ParthBhanderi here is my github project repo that you can use as a reference - https://github.com/hardikmodi1/sen_forntend. This has query, mutation and subscription implemented in flutter — Hardik Modi, Oct 15 '20 at 12:47

score 0 · Answer 1 · answered Feb 15 '22 at 23:07

flutter_graphql plugin has been discontinued, you may want to consider migrating to graphql_flutter. To subscribe to a Subscription, you can add it in Subscription.options() property as SubscriptionOptions

Subscription(
  options: SubscriptionOptions(
    document: subscriptionDocument, // subscribe to the document
  ),
  builder: (result) {
    if (result.hasException) {
      // Catch errors
      return Text(result.exception.toString());
    }

    if (result.isLoading) {
      // Display progress
      return Center(
        child: const CircularProgressIndicator(),
      );
    }
 
    // else, display data
    return Widget(...);
  }
)

How to consume graphql subscriptions with flutter?

1 Answers1