Flutter GraphQL查询构建插件simple_graphql_query_builder_gen的使用

Flutter GraphQL 查询构建插件 simple_graphql_query_builder_gen 的使用

简介

simple_graphql_query_builder_gen 是一个辅助包，用于支持文件生成以配合 simple_graphql_query_builder。

使用方法

  1. 添加依赖 在 pubspec.yaml 文件的 dev_dependencies 中添加以下依赖：

    dev_dependencies:
    simple_graphql_query_builder_gen: ^0.1.0

  2. 标注类 使用 [@QueryResult](/user/QueryResult) 注解类，并在需要的字段上使用 [@QueryResultField](/user/QueryResultField) 注解。

    [@QueryResult](/user/QueryResult)
class User {
    // 字段名称为 'username'
    [@QueryResultField](/user/QueryResultField)(name: 'username')
    final String name;

    // 忽略该字段
    [@QueryResultField](/user/QueryResultField)(ignore: true)
    final int age;

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

  3. 生成代码 添加 part 'file_name.g.dart'; 到相应的类中。然后运行以下命令生成类：

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

    或者

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

注解说明

QueryResult

[@QueryResult](/user/QueryResult) 用于标记对象的字段，这些字段将用于 QueryBuilder.fields。

示例

[@QueryResult](/user/QueryResult)
class MyClass {
    final String? name;

    const MyClass({required this.name});
}

或者

[@queryResult](/user/queryResult)
class MyClass {
    final String? name;

    const MyClass({required this.name});
}
QueryResultField

[@QueryResultField](/user/QueryResultField) 用于标记对象的单个字段，这些字段将用于 QueryBuilder.fields。

示例

[@queryResult](/user/queryResult)
class Example {
  final String? name;
  // 自定义字段名称为 'Test'，且类型为自定义类型
  [@QueryResultField](/user/QueryResultField)(ignore: false, name: 'Test2', isCustomType: true)
  final InnerExample? innerExample;
  // 类型为自定义类型
  [@QueryResultField](/user/QueryResultField)(isCustomType: true)
  final InnerExample innerExample2;

  const Example({
    this.name,
    this.innerExample,
    required this.innerExample2,
  });
}

生成后的结果可以用于提供给 QueryBuilder 参数 fields。

final Map<String, dynamic> exampletoQueryResult = {
  'name': null,
  'Test2': innerExampletoQueryResult,
  'innerExample2': innerExampletoQueryResult,
};

final Map<String, dynamic> innerExampletoQueryResult = {
  'innerField1': null,
};

参数说明

名称 默认值 是否必填 描述
name 字段名称 否 更改生成方法中字段的名称
isCustomType false 否 如果类型是用户创建的类型，则必须标记为 true
ignore false 否 设置为 true 以从生成的方法中移除字段

完整示例

import 'package:simple_graphql_query_builder/simple_graphql_query_builder.dart';

// 添加生成的文件
part 'example.g.dart';

[@queryResult](/user/queryResult)
class Example {
  final String? name;
  [@QueryResultField](/user/QueryResultField)(ignore: false, name: 'Test2', isCustomType: true)
  final InnerExample? innerExample;
  [@QueryResultField](/user/QueryResultField)(isCustomType: true)
  final InnerExample innerExample2;

  const Example({
    this.name,
    this.innerExample,
    required this.innerExample2,
  });
}

[@queryResult](/user/queryResult)
class InnerExample {
  final bool? innerField1;

  InnerExample({this.innerField1});
}

更多关于Flutter GraphQL查询构建插件simple_graphql_query_builder_gen的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GraphQL查询构建插件simple_graphql_query_builder_gen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用simple_graphql_query_builder_gen插件在Flutter中进行GraphQL查询的示例代码。这个插件可以帮助你构建和发送GraphQL查询请求。

首先，确保你的pubspec.yaml文件中已经添加了simple_graphql_query_builder_gen依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_graphql_client: ^x.y.z  # 确保添加GraphQL客户端库
  simple_graphql_query_builder: ^x.y.z  # 基础的查询构建器库
  simple_graphql_query_builder_gen: ^x.y.z  # 代码生成库

dev_dependencies:
  build_runner: ^x.y.z  # 用于运行代码生成

请注意，将^x.y.z替换为实际的版本号。

接下来，我们假设你有一个GraphQL服务器，并且你已经定义了GraphQL schema。我们将通过simple_graphql_query_builder_gen生成代码，并使用生成的代码进行查询。

1. 配置GraphQL Schema

首先，将你的GraphQL schema保存为一个.graphql文件，例如schema.graphql。

2. 生成代码

在项目根目录下运行以下命令以生成查询构建器代码：

flutter pub run build_runner build

3. 使用生成的查询构建器

假设你的GraphQL schema中有一个查询getUser，它返回一个用户的详细信息。生成的代码会包括一个用于构建这个查询的类。

import 'package:flutter/material.dart';
import 'package:simple_graphql_client/simple_graphql_client.dart';
import 'package:your_app/graphql/queries/get_user.query.g.dart';  // 导入生成的查询文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter GraphQL Query Builder Example'),
        ),
        body: GraphQLQueryExample(),
      ),
    );
  }
}

class GraphQLQueryExample extends StatefulWidget {
  @override
  _GraphQLQueryExampleState createState() => _GraphQLQueryExampleState();
}

class _GraphQLQueryExampleState extends State<GraphQLQueryExample> {
  GraphQLClient? _client;
  String? _userName;

  @override
  void initState() {
    super.initState();
    // 初始化GraphQL客户端
    _client = GraphQLClient(
      endPoint: 'https://your-graphql-endpoint.com/graphql',
    );
    // 执行查询
    _executeQuery();
  }

  Future<void> _executeQuery() async {
    // 构建查询
    final query = GetUserQueryBuilder()
      ..id = '1';  // 假设我们根据ID查询用户

    // 发送请求
    final result = await _client!.query(query);

    // 处理结果
    if (result.hasExceptions) {
      print('Error: ${result.exceptions!.first}');
    } else {
      final data = result.data!['getUser'] as Map<String, dynamic>;
      setState(() {
        _userName = data['name'];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        _userName ?? 'Loading...',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

4. 生成的文件结构

在上面的代码中，GetUserQueryBuilder和GetUserQueryData等类是由simple_graphql_query_builder_gen根据GraphQL schema生成的。这些类帮助你构建和解析GraphQL查询。

注意事项

  • 确保你的GraphQL schema是最新的，并在每次更改后重新运行代码生成器。
  • 生成的查询构建器类和方法名称将根据你的GraphQL schema自动生成，因此请查看生成的代码文件以了解具体的类和方法。
  • 处理错误和异常，确保你的应用在查询失败时能够优雅地处理错误。

通过上述步骤，你可以使用simple_graphql_query_builder_gen插件在Flutter应用中构建和执行GraphQL查询。希望这个示例对你有帮助！

回到顶部