Flutter GraphQL代码生成插件gql_code_builder的使用

Flutter GraphQL代码生成插件gql_code_builder的使用

概述

gql_code_builder 是一个用于 Dart 的代码生成工具，它能够将 *.graphql 文档和 SDL（Schema Definition Language）转换为有用的类。尽管其 API 目前还不稳定，但它是 package:gql_build 构建器的基础。

特性和问题报告

请在 issue tracker 提交功能请求和错误报告。

示例 Demo

以下是使用 gql_code_builder 生成 GraphQL 类的完整示例：

1. 添加依赖项

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

dependencies:
  gql: ^0.13.0
  gql_http_link: ^0.4.0
  gql_code_builder: ^0.2.0

dev_dependencies:
  build_runner: ^2.0.0

1. 创建 GraphQL 查询文件

在项目中创建一个名为 queries.graphql 的文件，并定义您的 GraphQL 查询。例如：

# queries.graphql
query GetRepositories($n: Int!) {
  viewer {
    repositories(first: $n) {
      nodes {
        name
        description
      }
    }
  }
}

1. 配置构建脚本

在 build.yaml 文件中配置 gql_code_builder，以便它可以处理 *.graphql 文件并生成相应的 Dart 类。

targets:
  $default:
    builders:
      gql_code_builder|gql_builder:
        options:
          schema_mapping:
            - schema: 'lib/schema.graphql'
              queries_glob: 'lib/queries/**.graphql'
              output: 'lib/generated/graphql_api.dart'

确保 schema.graphql 包含您的 GraphQL schema 定义。

1. 运行构建器

使用 build_runner 运行构建器以生成代码：

flutter pub run build_runner build

这将生成一个包含查询类的 Dart 文件，例如 lib/generated/graphql_api.dart。

1. 使用生成的类

现在可以在您的 Flutter 应用程序中使用生成的类来执行 GraphQL 查询。例如：

import 'package:gql/apollo.dart';
import 'package:gql_http_link/gql_http_link.dart';
import 'package:flutter/material.dart';
import 'generated/graphql_api.dart'; // Generated file

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GraphQLExample(),
    );
  }
}

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

class _GraphQLExampleState extends State<GraphQLExample> {
  late Client client;

  [@override](/user/override)
  void initState() {
    super.initState();
    
    final link = HttpLink('https://api.github.com/graphql');
    client = Client(
      link: link,
      cache: Cache(), // Optional
    );
  }

  Future<void> fetchRepositories() async {
    final options = QueryOptions(
      document: GET_REPOSITORIES, // This is the generated query class
      variables: <String, dynamic>{'n': 5},
    );

    final result = await client.query(options);

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GraphQL Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: fetchRepositories,
          child: Text('Fetch Repositories'),
        ),
      ),
    );
  }
}