Flutter GraphQL客户端插件clean_graphql的使用

当然，关于如何在Flutter项目中使用clean_graphql插件来设置GraphQL客户端，以下是一个基本的代码案例。clean_graphql是一个用于Flutter的GraphQL客户端库，它简化了与GraphQL服务器的交互。

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

dependencies:
  flutter:
    sdk: flutter
  clean_graphql: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，设置GraphQL客户端并发送查询请求。以下是一个完整的示例，包括定义GraphQL查询、创建客户端、发送请求以及处理响应。

1. 定义GraphQL查询

创建一个GraphQL查询文件，例如queries.graphql：

# queries.graphql
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

2. 创建GraphQL客户端

在你的Flutter应用中，创建一个GraphQL客户端实例。例如，在main.dart文件中：

import 'package:flutter/material.dart';
import 'package:clean_graphql/clean_graphql.dart';
import 'queries.graphql'; // 导入GraphQL查询文件

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

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

class GraphQLClientExample extends StatefulWidget {
  @override
  _GraphQLClientExampleState createState() => _GraphQLClientExampleState();
}

class _GraphQLClientExampleState extends State<GraphQLClientExample> {
  GraphQLClient? _client;
  UserResponseData? _userResponse;

  @override
  void initState() {
    super.initState();
    setUpGraphQLClient();
  }

  void setUpGraphQLClient() async {
    // 配置GraphQL客户端
    final HttpLink httpLink = HttpLink(
      uri: 'https://your-graphql-endpoint.com/graphql', // 替换为你的GraphQL服务器URL
    );

    // 使用Apollo Link创建客户端
    final ApolloClient client = ApolloClient(
      link: httpLink,
      cache: InMemoryCache(),
    );

    // 保存到状态
    setState(() {
      _client = GraphQLClient(client: client);
    });

    // 发送查询请求
    if (_client != null) {
      _fetchUserData();
    }
  }

  Future<void> _fetchUserData() async {
    try {
      // 使用定义的查询和变量
      final QueryResult result = await _client!.query(
        QueryOptions(
          documentNode: gql(getUserQuery),
          variables: <String, dynamic>{
            'id': '1', // 替换为实际的用户ID
          },
        ),
      );

      // 处理响应
      if (result.hasErrors) {
        print('GraphQL errors: ${result.errors!.map((e) => e.message).join(', ')}');
      } else if (result.data != null) {
        setState(() {
          _userResponse = UserResponseData.fromJson(result.data! as Map<String, dynamic>);
        });
      }
    } catch (e) {
      print('Error fetching user data: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _userResponse != null
          ? Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('User ID: ${_userResponse!.user!.id}'),
                Text('User Name: ${_userResponse!.user!.name}'),
                Text('User Email: ${_userResponse!.user!.email}'),
              ],
            )
          : CircularProgressIndicator(),
    );
  }
}

// 根据GraphQL查询生成的响应数据类
@freezed
class UserResponseData with _$UserResponseData {
  factory UserResponseData({
    required User? user,
  }) = _UserResponseData;

  factory UserResponseData.fromJson(Map<String, dynamic> json) =>
      _$UserResponseDataFromJson(json);
}

@freezed
class User with _$User {
  factory User({
    required String id,
    required String name,
    required String email,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

3. 解释代码

1. 定义GraphQL查询：在queries.graphql文件中定义GraphQL查询。
2. 创建GraphQL客户端：在setUpGraphQLClient方法中，配置HttpLink和ApolloClient，并保存到状态中。
3. 发送查询请求：在_fetchUserData方法中，使用定义的查询和变量发送请求，并处理响应。
4. 显示数据：在build方法中，根据响应数据更新UI。

注意事项

• 确保你替换了GraphQL服务器URL和用户ID。
• 根据实际的GraphQL查询响应结构，调整生成的响应数据类。
• 使用freezed库来生成不可变的数据类，这里假设你已经添加了freezed依赖。

这个示例展示了如何使用clean_graphql插件在Flutter应用中与GraphQL服务器进行交互。你可以根据实际需求进行扩展和修改。