如何使用 Flutter 消费 graphql 订阅？答案

【问题标题】：How to consume graphql subscriptions with flutter?如何使用 Flutter 消费 graphql 订阅？
【发布时间】：2019-08-14 17:51:03
【问题描述】：

我正在使用 flutter_graphql 插件，它对于查询和突变工作正常，但我面临订阅问题。

以下是我尝试过的代码，但它只是打印加载，甚至没有访问服务器。

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');
                }
              }
            ),
          ],
        ),
      ),
    );
  }

}

我想使用订阅从服务器接收消息计数以向用户提供通知。

【问题讨论】：

行 return Text(payload['requestSubscription']['requestData']); 不应该是 return Text(payload['notification']['messageCount']);。您还可以使用 initState 中的 socketClient.subscribe(SubscriptionRequest(operationName,query,{}))).listen((data){print(data);}); 方法检查您的服务器是否正在发送订阅。
只要找出这个库的bug，ctrl+点击Subscription打开subscription.dart文件即可。在该文件中，如果您分析很容易看到 socketClient 变量为空。因此，只需在 initState() 函数中定义它，如文档中所示。重新启动您的应用程序。它就像一个魅力。
@HardikModi 你能给我完整的工作示例吗我不知道如何用我的颤振项目来实现它会非常有帮助提前谢谢。
@ParthBhanderi 这是我的 github 项目存储库，您可以将其用作参考 - github.com/hardikmodi1/sen_forntend。这在 Flutter 中实现了查询、变异和订阅

标签： flutter graphql-subscriptions

【解决方案1】：

flutter_graphql 插件已停用，您可能需要考虑迁移到graphql_flutter。要订阅订阅，您可以将其添加到 Subscription.options() 属性中为 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(...);
  }
)

【讨论】：