Flutter GraphQL客户端插件gql_phoenix_link的使用

Flutter GraphQL客户端插件gql_phoenix_link的使用

gql_phoenix_link 是一个使用Phoenix Channels的实验性GraphQL Link。它支持查询（queries）、变更（mutations）和订阅（subscriptions）。

示例代码

以下是一个完整的示例代码，展示如何在Flutter项目中使用 gql_phoenix_link 插件。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GraphQLDemo(),
    );
  }
}

class GraphQLDemo extends StatefulWidget {
  [@override](/user/override)
  _GraphQLDemoState createState() => _GraphQLDemoState();
}

class _GraphQLDemoState extends State<GraphQLDemo> {
  late PhoenixClient _client;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 配置GraphQL客户端
    _client = PhoenixClient(
      wsUri: 'ws://localhost:4000/socket', // WebSocket URI
      httpClient: HttpClient(), // 可选的HTTP客户端
    );

    // 连接到WebSocket
    _client.connect();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GraphQL Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                // 执行查询
                final QueryResult result = await _client.query(
                  r'''
                    query {
                      hello
                    }
                  ''',
                );

                if (result.hasException) {
                  print(result.exception);
                } else {
                  print(result.data);
                }
              },
              child: Text('执行查询'),
            ),
            ElevatedButton(
              onPressed: () async {
                // 执行变更
                final QueryResult result = await _client.mutate(
                  r'''
                    mutation {
                      createPost(input: {title: "Hello", content: "World"}) {
                        post {
                          id
                          title
                          content
                        }
                      }
                    }
                  ''',
                );

                if (result.hasException) {
                  print(result.exception);
                } else {
                  print(result.data);
                }
              },
              child: Text('执行变更'),
            ),
            ElevatedButton(
              onPressed: () async {
                // 订阅数据
                _client.subscribe(
                  r'''
                    subscription {
                      newPost {
                        id
                        title
                        content
                      }
                    }
                  ''',
                  onData: (QueryResult result) {
                    if (result.hasException) {
                      print(result.exception);
                    } else {
                      print(result.data);
                    }
                  },
                  onError: (Object error) {
                    print(error);
                  },
                );
              },
              child: Text('开始订阅'),
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    // 断开WebSocket连接
    _client.disconnect();
    super.dispose();
  }
}