Flutter GraphQL重连插件gql_phoenix_link_2的使用

Flutter GraphQL重连插件gql_phoenix_link_2的使用

使用说明

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

信息

该插件替代了已废弃的 gql_phoenix_link 库（https://pub.dev/packages/gql_phoenix_link）。

完整示例 Demo

以下是一个完整的示例，展示如何在 Flutter 中使用 gql_phoenix_link_2 插件来实现 GraphQL 查询、变更和订阅。

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^5.0.0+1
  gql_phoenix_link_2: ^1.0.0

运行 flutter pub get 安装依赖。

2. 配置 Phoenix Channel 和 GraphQL Client

创建一个 Phoenix Channel 并将其与 GraphQL Client 结合使用。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GraphQLExample(),
    );
  }
}

class GraphQLExample extends StatefulWidget {
  @override
  _GraphQLExampleState createState() => _GraphQLExampleState();
}

class _GraphQLExampleState extends State<GraphQLExample> {
  late ValueNotifier<GraphQLClient> client;

  @override
  void initState() {
    super.initState();

    // 创建 Phoenix Channel
    final channel = PhoenixChannel(
      "ws://localhost:4000/socket", // Phoenix WebSocket 地址
      "auth_token", // 认证令牌
    );

    // 创建 GraphQL Link
    final link = PhoenixLink(channel);

    // 创建 GraphQL Client
    client = ValueNotifier(
      GraphQLClient(
        link: link,
        cache: GraphQLCache(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GraphQL Example"),
      ),
      body: Query(
        client: client.value,
        options: QueryOptions(
          document: gql("""
            query GetTodos {
              todos {
                id
                title
              }
            }
          """),
        ),
        builder: (QueryResult result, {fetchMore, refetch}) {
          if (result.isLoading) {
            return Center(child: CircularProgressIndicator());
          }

          if (result.hasException) {
            return Center(child: Text(result.exception.toString()));
          }

          return ListView.builder(
            itemCount: result.data?['todos'].length ?? 0,
            itemBuilder: (context, index) {
              final todo = result.data?['todos'][index];
              return ListTile(
                title: Text(todo['title']),
              );
            },
          );
        },
      ),
    );
  }
}

3. 代码解析

• Phoenix Channel
  创建一个 PhoenixChannel 对象，指定 WebSocket 地址和认证令牌。

  final channel = PhoenixChannel(
    "ws://localhost:4000/socket",
    "auth_token",
  );

• Phoenix Link
  将 PhoenixChannel 包装为 PhoenixLink，用于与 GraphQL 进行通信。

  final link = PhoenixLink(channel);

• GraphQL Client
  使用 GraphQLClient 配置 GraphQL 客户端，并将 PhoenixLink 设置为链接。

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

• Query 操作
  使用 Query 小部件执行 GraphQL 查询。

  Query(
    client: client.value,
    options: QueryOptions(
      document: gql("""
        query GetTodos {
          todos {
            id
            title
          }
        }
      """),
    ),
    builder: (QueryResult result, {fetchMore, refetch}) {
      // 处理加载状态、异常和数据
    },
  )