Flutter GraphQL客户端注解插件graphql_client_annotation的使用

Flutter GraphQL客户端注解插件graphql_client_annotation的使用

graphql_client_annotation 是一个用于定义注解的库，这些注解将由 graphql_client_generator 使用来生成具有特定意见的GraphQL客户端类。通过这种方式，你可以轻松地配置和使用GraphQL客户端。

特性和问题报告

请在以下位置提交功能请求和错误报告：

• 问题跟踪器

如何使用graphql_client_annotation

为了更好地理解如何配置和使用 graphql_client_annotation，请查看以下完整的示例代码。

步骤1: 添加依赖

首先，在你的 pubspec.yaml 文件中添加 graphql_client_annotation 和 graphql_client_generator 的依赖项：

dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^5.0.0-nullsafety.2

dev_dependencies:
  build_runner: ^2.0.0
  graphql_client_generator: ^1.0.0

步骤2: 定义GraphQL查询

创建一个包含GraphQL查询的文件（例如 queries.graphql）：

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

步骤3: 创建注解类

创建一个新的 Dart 类并使用 @GraphQLQuery 注解来指定你的GraphQL查询：

import 'package:graphql_client_annotation/graphql_client_annotation.dart';

@GraphQLQuery(file: 'queries.graphql')
class UserQueries {
  final String id;
  final String name;
  final String email;

  UserQueries({required this.id, required this.name, required this.email});
}

步骤4: 生成客户端类

运行 build_runner 来生成客户端类：

flutter pub run build_runner build

这将会在你项目目录下生成一个对应的客户端类文件，例如 user_queries.g.dart。

步骤5: 使用生成的客户端类

现在你可以在你的应用中使用生成的客户端类了。这里是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'user_queries.g.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 Client Example')),
        body: GraphQLProvider(
          client: GraphQLClient(
            link: HttpLink('https://your-graphql-endpoint.com/graphql'),
            cache: GraphQLCache(),
          ),
          child: MyHomePage(),
        ),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  late Future<UserQueries> _userFuture;

  [@override](/user/override)
  void initState() {
    super.initState();
    _userFuture = UserQueries().fetchUser(id: '1'); // 假设用户ID为1
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder<UserQueries>(
      future: _userFuture,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Column(
            children: [
              Text('Name: ${snapshot.data!.name}'),
              Text('Email: ${snapshot.data!.email}'),
            ],
          );
        } else if (snapshot.hasError) {
          return Text('${snapshot.error}');
        }
        return CircularProgressIndicator();
      },
    );
  }
}