Flutter GraphQL类型生成插件graphql_types_builder的使用

Flutter GraphQL类型生成插件graphql_types_builder的使用

Graphql Types Builder #

这是一个小型包,利用build_runner的力量从GraphQL模式文件生成简单的Dart类。

该包目前处于测试阶段。谨慎使用,并报告任何潜在问题

功能 #

  • ✅ 从GraphQL模式生成Dart类
  • ✅ 为每个生成的Dart类生成fromMap构造函数
  • ✅ 支持自定义数据类型(非GraphQL原生类型)

即将支持的功能 #

  • ❌ 增加对GraphQL查询的支持
  • ❌ 增加对GraphQL变更的支持
  • ❌ 增加对GraphQL订阅的支持
  • ❌ 生成toMap实例方法
  • ❌ 改进README文件

开始使用 #

首先,你需要在pubspec.yaml文件中添加以下dev_dependencies

dev_dependencies:
  build_runner:
  graphql_types_builder: ^0.1.0

然后,在项目根路径下创建一个名为build.yaml的文件,内容如下:

targets:
  $default:
    builders:
      graphql_types_builder|graphqlTypesBuilder:
        enabled: True
        generate_for:
          - lib/src/**/*schema.graphql

注意,你需要将your_project_name替换为你项目的名称,可以在`pubspec.yaml`文件的顶部找到。

最后,确保在lib/src文件夹内有一个schema.graphql文件。

使用 #

运行以下命令以生成Dart类:

flutter packages pub run build_runner build

贡献 #

该包目前处于测试阶段。如果你想贡献,请通过发送电子邮件或创建Github讨论来联系包的所有者。

附加信息 #

这是一个由FreeWay Mx团队创建并维护的包。如果你有任何建议或发现任何问题,请毫不犹豫地创建一个新的Github问题😊。


完整示例 Demo

步骤1:创建pubspec.yaml文件

name: graphql_example
description: A sample application using graphql_types_builder

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  build_runner:
  graphql_types_builder: ^0.1.0

步骤2:创建build.yaml文件

targets:
  $default:
    builders:
      graphql_types_builder|graphqlTypesBuilder:
        enabled: True
        generate_for:
          - lib/src/**/*schema.graphql

步骤3:创建schema.graphql文件

type User {
  id: ID!
  name: String!
  age: Int!
}

步骤4:运行构建命令

flutter packages pub run build_runner build

步骤5:检查生成的Dart类

生成的类文件将位于lib/src目录下,例如:

// lib/src/user.g.dart
class User {
  final String id;
  final String name;
  final int age;

  User({
    required this.id,
    required this.name,
    required this.age,
  });

  factory User.fromMap(Map<String, dynamic> map) {
    return User(
      id: map['id'] as String,
      name: map['name'] as String,
      age: map['age'] as int,
    );
  }
}

更多关于Flutter GraphQL类型生成插件graphql_types_builder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GraphQL类型生成插件graphql_types_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


graphql_types_builder 是一个用于 Flutter 的代码生成工具,它可以根据 GraphQL 的 schema 和查询语句自动生成 Dart 类型和查询类。这个工具可以帮助开发者减少手动编写类型定义和查询代码的工作量,同时确保类型安全。

安装 graphql_types_builder

首先,你需要在 pubspec.yaml 文件中添加 graphql_types_builder 作为开发依赖:

dev_dependencies:
  graphql_types_builder: ^latest_version

然后运行 flutter pub get 来安装依赖。

配置 graphql_types_builder

在项目根目录下创建一个 build.yaml 文件,用于配置 graphql_types_builder

targets:
  $default:
    builders:
      graphql_types_builder:
        options:
          schema_path: "lib/graphql/schema.graphql"
          queries_glob: "lib/graphql/queries/*.graphql"
  • schema_path: GraphQL schema 文件的路径。
  • queries_glob: GraphQL 查询文件的路径模式,支持 glob 语法。

生成 Dart 类型和查询类

  1. 编写 GraphQL Schema 和查询文件

    lib/graphql/schema.graphql 中定义你的 GraphQL schema:

    type User {
      id: ID!
      name: String!
      email: String!
    }
    
    type Query {
      users: [User!]!
    }
    

    lib/graphql/queries/get_users.graphql 中定义你的查询:

    query GetUsers {
      users {
        id
        name
        email
      }
    }
    
  2. 运行代码生成器

    使用以下命令生成 Dart 代码:

    flutter pub run build_runner build
    

    这将会在 lib/graphql/queries/ 目录下生成对应的 Dart 文件,例如 get_users.graphql.dart

使用生成的代码

生成的代码中包含了与 GraphQL 查询对应的 Dart 类和类型。你可以在 Flutter 项目中使用这些生成的类来执行查询和处理数据。

例如,使用生成的 GetUsersQuery 类来执行查询:

import 'package:your_app/graphql/queries/get_users.graphql.dart';

Future<void> fetchUsers() async {
  final client = GraphQLClient(
    cache: GraphQLCache(),
    link: HttpLink('https://your-graphql-endpoint.com/graphql'),
  );

  final options = QueryOptions(
    document: GET_USERS_QUERY_DOCUMENT,
  );

  final result = await client.query(options);

  if (result.hasException) {
    print(result.exception.toString());
  } else {
    final users = GetUsersQuery$Query.fromJson(result.data!);
    print(users.users);
  }
}
回到顶部