Flutter代码生成插件ferry_generator的使用

简介

ferry_generator 是一个用于生成完全类型化的 OperationRequest 的 Dart 代码生成器，这些请求可以与 ferry 客户端一起使用。它可以帮助开发者更方便地处理 GraphQL 请求，并确保类型安全。

GitHub项目信息

• License: MIT License
• PRs Welcome: 欢迎提交 PR
• Watch on GitHub: 关注项目
• Star on GitHub: 给项目加星
• Forks on GitHub: Fork 项目
• Discord: 加入 Discord 社区

安装和配置

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

dependencies:
  ferry: ^0.12.0
  ferry_flutter: ^0.12.0

dev_dependencies:
  build_runner: ^2.0.0
  ferry_generator: ^0.12.0

然后运行以下命令来安装依赖项：

flutter pub get

使用示例

1. 创建 GraphQL 查询文件

创建一个新的文件 lib/graphql/get_user.graphql，内容如下：

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

2. 配置 build.yaml

为了确保 ferry_generator 可以找到并生成代码，需要在项目的根目录下创建或编辑 build.yaml 文件：

targets:
  $default:
    builders:
      ferry_generator|gql_builder:
        enabled: true
        options:
          schema_path: lib/graphql/schema.json

3. 运行代码生成

运行以下命令来生成代码：

flutter pub run build_runner build --delete-conflicting-outputs

这将在 lib/graphql/ 目录下生成相应的 Dart 文件。

4. 使用生成的代码

在你的 Dart 文件中导入生成的代码，并使用它来执行查询：

import 'package:ferry/ferry.dart';
import 'package:ferry_flutter/ferry_flutter.dart';
import 'package:get_user.graphql.dart'; // 生成的文件

final client = Client(
  link: HttpLink('https://your-graphql-endpoint.com/graphql'),
  cache: Cache(),
);

void getUser(int userId) async {
  final op = GET_USER(\$id: userId);
  final response = await client.request(op).first;

  if (response.data != null) {
    print('User: ${response.data.user.name}');
  } else {
    print('Error: ${response.errors}');
  }
}

5. 完整示例

下面是一个完整的示例应用程序，展示了如何使用 ferry_generator 和 ferry_flutter 来执行 GraphQL 查询：

import 'package:flutter/material.dart';
import 'package:ferry/ferry.dart';
import 'package:ferry_flutter/ferry_flutter.dart';
import 'package:get_user.graphql.dart'; // 生成的文件

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

class MyApp extends StatelessWidget {
  final Client client = Client(
    link: HttpLink('https://your-graphql-endpoint.com/graphql'),
    cache: Cache(),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GraphQLProvider(
        client: client,
        child: UserScreen(),
      ),
    );
  }
}

class UserScreen extends StatelessWidget {
  final int userId = 1; // 示例用户ID

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Details')),
      body: Query<GET_USER>(
        operation: GET_USER(\$id: userId),
        builder: (QueryResult result, { VoidCallback? refetch }) {
          if (result.loading) {
            return Center(child: CircularProgressIndicator());
          }

          if (result.data?.user != null) {
            final user = result.data!.user;
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Name: ${user.name}'),
                  Text('Email: ${user.email}'),
                ],
              ),
            );
          }

          return Center(child: Text('No data found'));
        },
      ),
    );
  }
}

通过以上步骤，你可以轻松地使用 ferry_generator 来生成类型安全的 GraphQL 请求代码，并将其集成到 Flutter 应用程序中。希望这个指南对你有所帮助！如果有任何问题，欢迎随时提问。