Flutter GraphQL代码生成配置插件graphql_codegen_config的使用

在开发Flutter应用时，处理GraphQL查询可能会变得繁琐且容易出错。为了简化这一过程，可以使用graphql_code_generator插件来自动为你的GraphQL查询生成类型安全的代码。为了更好地配置这些代码生成器，我们可以使用graphql_codegen_config插件。

安装

首先，确保在你的pubspec.yaml文件中添加了graphql_code_generator依赖项：

dependencies:
  graphql_flutter: ^5.0.0

dev_dependencies:
  build_runner: ^2.0.0
  graphql_code_generator: ^3.0.0

然后，你需要安装graphql_codegen_config插件。在dev_dependencies部分添加以下内容：

dev_dependencies:
  graphql_codegen_config: ^1.0.0

配置

在项目根目录下创建一个名为build.yaml的文件，并添加以下内容：

targets:
  $default:
    builders:
      graphql_codegen_config|graphql_codegen:
        options:
          schema: "lib/graphql/schema.graphql"
          documents: "lib/graphql/**/*.graphql"
          output_dir: "lib/generated/"

上述配置指定了GraphQL模式文件的位置（schema.graphql），要处理的GraphQL文档文件的位置（lib/graphql/**/*.graphql），以及生成代码的输出目录（lib/generated/）。

示例代码

假设你有一个简单的GraphQL查询文件lib/graphql/query/user.gql，内容如下：

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

在你的Dart文件中，你可以这样使用它：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GraphQL Example')),
        body: UserQuery(),
      ),
    );
  }
}

class UserQuery extends StatefulWidget {
  [@override](/user/override)
  _UserQueryState createState() => _UserQueryState();
}

class _UserQueryState extends State<UserQuery> {
  final String query = r'''
    query GetUser($id: ID!) {
      user(id: $id) {
        id
        name
        email
      }
    }
  ''';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Query(
      options: QueryOptions(
        document: gql(query),
        variables: {'id': '1'},
      ),
      builder: (QueryResult result, {refetch, fetchMore}) {
        if (result.hasException) {
          return Text(result.exception.toString());
        }

        if (result.isLoading) {
          return Center(child: CircularProgressIndicator());
        }

        return Column(
          children: [
            Text('ID: ${result.data['user']['id']}'),
            Text('Name: ${result.data['user']['name']}'),
            Text('Email: ${result.data['user']['email']}'),
          ],
        );
      },
    );
  }
}