Flutter GraphQL客户端通信插件gql_link的使用

项目信息

gql_link 是一个模块化的基于AST的GraphQL请求执行接口。它允许开发者通过组合不同的链接（Links）来构建复杂的GraphQL请求处理逻辑。

设置Link

设置Link的方式有很多，可以通过组合其他Link来实现。下面是一个简单的例子，展示了如何使用 Link.from 方法组合多个Link：

import "package:gql_link/gql_link.dart";
import "package:gql_dedupe_link/gql_dedupe_link.dart";
import "package:gql_http_link/gql_http_link.dart";

import "./my_custom_link.dart";

void main () {
  final link = Link.from([
    MyCustomLink(),
    DedupeLink(),
    HttpLink("/graphql"),
  ]);
}

要使用Link执行GraphQL操作，必须确保Link以终止Link（如 HttpLink）结束。

使用Link

当Link设置完成后，需要将GraphQL操作封装在 Request 中，并通过 link.request(request) 来执行：

import "package:gql/language.dart";
import "package:gql_exec/gql_exec.dart";
import "package:gql_link/gql_link.dart";

class MyLinkContext extends ContextEntry {
  final int value;

  const MyLinkContext(this.value);

  @override
  List<Object> get fieldsForEquality => [];
}

class MyLink extends Link {
  @override
  Stream<Response> request(Request request, [forward]) => Stream.fromIterable(
        [
          Response(
            data: <String, dynamic>{
              "context": request.context.entry<MyLinkContext>()?.value,
            },
            response: <String, dynamic>{
              "data": <String, dynamic>{
                "context": request.context.entry<MyLinkContext>()?.value,
              }
            },
          ),
        ],
      );
}

void main() async {
  final link = MyLink();

  for (var i = 0; i < 10; i++) {
    final first = await link
        .request(
          Request(
            operation: Operation(
              document: parseString(""),
            ),
            context: Context.fromMap(
              <Type, ContextEntry>{
                MyLinkContext: MyLinkContext(i),
              },
            ),
          ),
        )
        .first;

    print(first.data);
  }
}

实现自定义Link

Link设计为可组合的。如果需要添加自定义行为，可以继承 Link 类来实现自己的Link。如果你更喜欢函数式编程风格，可以使用 LinkFunction 和 Link.function。如果需要根据某些条件将请求路由到不同的Link，可以使用 Link.route(LinkRouter route)。

功能和Bug

请在 GitHub 上提交功能请求和Bug报告。

完整示例Demo

下面是一个完整的示例，展示了如何在Flutter应用中使用 gql_link 插件进行GraphQL通信。

pubspec.yaml

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

dependencies:
  flutter:
    sdk: flutter
  gql_link: ^0.4.0
  gql_http_link: ^0.4.0
  gql_dedupe_link: ^0.4.0
  gql: ^0.7.0

main.dart

接下来是 main.dart 文件的内容：

import 'package:flutter/material.dart';
import 'package:gql/language.dart';
import 'package:gql_exec/gql_exec.dart';
import 'package:gql_link/gql_link.dart';
import 'package:gql_http_link/gql_http_link.dart';
import 'package:gql_dedupe_link/gql_dedupe_link.dart';

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

class MyApp extends StatelessWidget {
  final Link link = Link.from([
    DedupeLink(),
    HttpLink('https://api.spacex.land/graphql/'),
  ]);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GraphQL Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GraphQLPage(link: link),
    );
  }
}

class GraphQLPage extends StatefulWidget {
  final Link link;

  GraphQLPage({required this.link});

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

class _GraphQLPageState extends State<GraphQLPage> {
  String query = """
  query GetLaunches {
    launchesPast(limit: 10) {
      mission_name
      launch_date_local
    }
  }
  """;

  late Stream<Response> _stream;

  @override
  void initState() {
    super.initState();
    _stream = widget.link.request(
      Request(
        operation: Operation(document: parseString(query)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter GraphQL Demo'),
      ),
      body: StreamBuilder<Response>(
        stream: _stream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final data = snapshot.data!.data as Map<String, dynamic>;
            final launches = data['launchesPast'] as List<dynamic>;

            return ListView.builder(
              itemCount: launches.length,
              itemBuilder: (context, index) {
                final launch = launches[index];
                return ListTile(
                  title: Text(launch['mission_name']),
                  subtitle: Text(launch['launch_date_local']),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

这个示例展示了如何在Flutter应用中使用 gql_link 插件与GraphQL API进行通信，并展示从API获取的数据。希望这个示例能帮助你更好地理解和使用 gql_link 插件。