Flutter：graphql（GraphQL 客户端实现）

graphql-github-io-zh-Hans生态项目与库

Flutter：graphql（GraphQL 客户端实现）

简介

graphql 是一个为 Flutter 设计的 GraphQL 客户端实现，由 zino-app 开发维护。它提供了简洁、声明式的 API，支持查询（Query）、变更（Mutation）、订阅（Subscription）等操作，并集成了缓存、错误处理、文件上传等能力，帮助开发者在 Flutter 应用中高效对接 GraphQL 服务。

源文档描述：A GraphQL client implementation in Flutter.

核心特性

完整的 GraphQL 支持：基于 GraphQL 规范，支持 query、mutation、subscription。
Flutter 原生集成：提供 GraphQLProvider、Query、Mutation 等 Widget，可无缝融入 Flutter 声明式 UI。
规范化缓存：内置 GraphQLCache，支持缓存读写与自动更新。
响应式流：与 RxDart 结合，支持流式数据响应。
文件上传：支持 multipart 文件上传请求。
可扩展性：通过 link 机制可自定义请求链路，灵活扩展认证、日志、重试等逻辑。
订阅支持：基于 WebSocket 实现 GraphQL 订阅。

安装

在 pubspec.yaml 中添加依赖：

yaml 复制代码

dependencies:
  graphql: ^5.1.0

最新版本请参阅 pub.dev 或 GitHub Releases。

快速上手

1. 创建客户端

dart 复制代码

import 'package:graphql/client.dart';

final HttpLink httpLink = HttpLink('https://your-graphql-endpoint/graphql');

final GraphQLClient client = GraphQLClient(
  link: httpLink,
  cache: GraphQLCache(),
);

2. 执行查询

dart 复制代码

final QueryOptions options = QueryOptions(
  document: gql(r'''
    query GetUser($id: ID!) {
      user(id: $id) {
        name
        email
      }
    }
  '''),
  variables: {'id': '1'},
);

final QueryResult result = await client.query(options);

if (result.hasException) {
  print(result.exception);
} else {
  print(result.data);
}

3. 执行变更

dart 复制代码

final MutationOptions options = MutationOptions(
  document: gql(r'''
    mutation UpdateUser($id: ID!, $name: String!) {
      updateUser(id: $id, name: $name) {
        id
        name
      }
    }
  '''),
  variables: {'id': '1', 'name': 'Alice'},
);

final QueryResult result = await client.mutate(options);

dart 复制代码

GraphQLProvider(
  client: client,
  child: Query(
    options: QueryOptions(
      document: gql('{ posts { title } }'),
    ),
    builder: (QueryResult result, { VoidCallback? refetch, FetchMore? fetchMore }) {
      if (result.isLoading) return const CircularProgressIndicator();
      if (result.hasException) return Text(result.exception.toString());
      // 渲染列表等 UI
      return ListView(...);
    },
  ),
)

Flutter：graphql（GraphQL 客户端实现）

Flutter：graphql（GraphQL 客户端实现）

简介

核心特性

安装

快速上手

1. 创建客户端

2. 执行查询

3. 执行变更

4. 在 Widget 中使用

相关链接

帮助我们改进文档