フラッターでGraphSQLサブスクリプションを処理する方法

このブログ記事では、FlutterでのGraphSQLサブスクリプションで動作する方法を説明します.我々は1つのボタンを押すたびに数を増加させるシンプルなカウンタアプリを作成するつもりです.我々は、別のユーザー間のレース条件を防ぐためにインクリメント突然変異でボタンを増加します.したがって、アプリケーションがインクリメントされませんが、Graphicsのエンドポイントがあります.突然変異の後、我々は変更を聞くために購読に移動します.我々は、我々が単独でフラッターコードに集中することができるように、graphql終点を提供します.

フラッタープロジェクトのセットアップ
我々は、使用するつもりですGraphql Flutter 依存.新しい依存関係のインストールはフラッターで簡単です.我々は、単に編集することができますpubspec.yml . ここでは、依存関係を追加します!

dependencies:
  graphql_flutter: ^3.0.0

あなたが続行する前にフラッターパブを取得することを忘れないでください!

GraphSQLの終点に突然変異を行う
我々が実行したい突然変異は、現在の数を1増加させることです.他のユーザーがすでに数を増やしたかもしれないので、我々は実際の数を知らないでこれをすることができたいです.幸運にもHasura supports an increment operation それはまさにこれです.そのポストでは、以下の突然変異を例として示します.

mutation IncrementCounter {
  update_counter(
    where: {id: {_eq: 1}},
    _inc: {count: 1}
  ) {
    affected_rows
    returning {
      id
      count
    }
  }
}

我々は突然のスタートから始める前に親ウィジェットに小さな変更を加えなければなりません.GraphqlProviderでウィジェットをラップします.これは、我々がフラッタGraphicプロジェクトの突然変異を使うことができるようにします.このためには、GraphSQLのエンドポイントへのリンクを提供しなければなりません.我々は、我々がHasuraで作成した終点を使うつもりです.https://counter.hasura.app/v1/graphql .

class GraphQLSubscriptionDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final HttpLink link = HttpLink(
      uri: 'https://counter.hasura.app/v1/graphql',
    );

    ValueNotifier client = ValueNotifier(
      GraphQLClient(
        cache: InMemoryCache(),
        link: link,
      ),
    );

    return GraphQLProvider(
      client: client,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green,
            title: Text("Graphql Subscription Demo"),
          ),
          body: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              children: [
                IncrementButton(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

これで、インクリメントボタンを追加できます.これは、突然変異を実行する単純なボタンになります.このため、突然変異ウィジェットを使用することができます.ここでは、ボタンを返すビルダーを提供します.Builderには、ボタンが押されたときに実行できるランオプションがあります.我々は常にID 1とカウンタを更新すると、我々は突然変異の任意のオプションを提供する必要はありません.突然変異は、オプションを通して突然変異にストリング値として提供されます.これは、我々はカウントをインクリメントするためにしなければならないすべてです!

class IncrementButton extends StatelessWidget {
  static String incr = '''mutation IncrementCounter {
  update_counter(
    where: {id: {_eq: 1}},
    _inc: {count: 1}
  ) {
    affected_rows
    returning {
      id
      count
    }
  }
}''';

  @override
  Widget build(BuildContext context) {
    return Mutation(
      options: MutationOptions(
        documentNode: gql(incr),
      ),
      builder: (
        RunMutation runMutation,
        QueryResult result,
      ) {
        return Center(
          child: RaisedButton.icon(
            onPressed: () {
              runMutation({});
            },
            icon: Icon(Icons.plus_one),
            label: Text(""),
          ),
        );
      },
    );
  }
}

GraphSQLサブスクリプションを聞く
今我々は我々のアプリでカウントを更新することができます、それは楽しい部分のための時間です!別のウィジェットでカウントの更新を聞く.このウィジェットは、カウンタの現在の値が表示され、新しいイベントがサブスクリプションで公開されているときに更新されます.まず、サブスクリプションがどのように見えるかを始めましょう!

subscription WatchCounter {
  counter(where: {id: {_eq: 1}}) {
    count
  }
}

サブスクリプションで始める前に、親ウィジェットに小さな変更を加える必要があります.突然変異のために、我々はGraphSQL終点へのHTTPリンクだけを提供しました.購読のために、我々はまた、サーバーがアップデートを公開することができる接続を開くことができるように、WebSocketリンクを追加する必要があります.WebSocketリンクを追加し、HTTPリンクと組み合わせます.

    final HttpLink httpLink = HttpLink(
      uri: 'https://counter.hasura.app/v1/graphql',
    );

    final WebSocketLink websocketLink = WebSocketLink(
      url: 'wss://counter.hasura.app/v1/graphql',
      config: SocketClientConfig(
        autoReconnect: true,
        inactivityTimeout: Duration(seconds: 30),
      ),
    );

    ValueNotifier client = ValueNotifier(
      GraphQLClient(
        cache: InMemoryCache(),
        link: httpLink.concat(websocketLink),
      ),
    );

私たちは、突然変異と同じようにほぼ正確にこのサブスクリプションを使用することができます.新しいstatelesswidgetを作成します.ビルドメソッドでは、購読ウィジェットを返します.ここでは、突然変異のように文字列としてサブスクリプションを提供する必要があります.また、サブスクリプション、ウォッチカウンタの名前を提供する必要があります.最も重要な部分は、ビルダーは、サブスクリプションの状態を返します.サブスクリプションが読み込まれていない場合、我々はエラーがない、我々はカウンタの値を返す!

class Counter extends StatelessWidget {
  static String subscription = '''subscription WatchCounter {
  counter(where: {id: {_eq: 1}}) {
    count
  }
}''';

  @override
  Widget build(BuildContext context) {
    return Subscription(
      "WatchCounter",
      subscription,
      builder: ({
        bool loading,
        dynamic payload,
        dynamic error,
      }) {
        if (loading == false && error == null) {
          return Text(payload['counter'][0]['count'].toString());
        } else {
          return Text("Fetching Count");
        }
      },
    );
  }
}

あなたが完全なコードに興味があるならば、それはここで見つかりますGithub . あなたがより複雑なモデルを使用しているならば、我々はあなたの質問、突然変異と会費のためにArtemisでモデルを生成することを提案します.ブログ一覧にもどるwe show how to generate the models for the queries of your Flutter GraphQL endpoint. 読んでいただきありがとうございます、あなたが質問、意見や提案がある場合はコメントを残して無料!
郵便How to Process GraphQL Subscriptions in Flutter 最初に現れたBarttje .