sunny_graphql 是一个用于 Flutter 的 GraphQL 客户端插件，它可以帮助你轻松地与 GraphQL API 进行交互。以下是如何在 Flutter 项目中使用 sunny_graphql 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 sunny_graphql 依赖：

dependencies:
  flutter:
    sdk: flutter
  sunny_graphql: ^1.0.0  # 请使用最新版本

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

2. 创建 GraphQL 客户端

接下来，你需要创建一个 GraphQL 客户端实例。通常，你需要在应用的某个地方（例如 main.dart 或一个单独的服务类中）初始化客户端。

import 'package:sunny_graphql/sunny_graphql.dart';

final GraphQLClient client = GraphQLClient(
  link: HttpLink('https://your-graphql-endpoint.com/graphql'),
  cache: GraphQLCache(),
);

3. 执行查询

你可以使用 client.query 方法来执行 GraphQL 查询。

import 'package:sunny_graphql/sunny_graphql.dart';

Future<void> fetchData() async {
  const String query = '''
    query GetUserData {
      user {
        id
        name
        email
      }
    }
  ''';

  final QueryOptions options = QueryOptions(
    document: gql(query),
  );

  final QueryResult result = await client.query(options);

  if (result.hasException) {
    print('Error: ${result.exception}');
  } else {
    print('Data: ${result.data}');
  }
}

4. 执行 Mutation

你可以使用 client.mutate 方法来执行 GraphQL Mutation。

import 'package:sunny_graphql/sunny_graphql.dart';

Future<void> updateUserData() async {
  const String mutation = '''
    mutation UpdateUser($name: String!) {
      updateUser(name: $name) {
        id
        name
      }
    }
  ''';

  final MutationOptions options = MutationOptions(
    document: gql(mutation),
    variables: <String, dynamic>{
      'name': 'New Name',
    },
  );

  final QueryResult result = await client.mutate(options);

  if (result.hasException) {
    print('Error: ${result.exception}');
  } else {
    print('Updated Data: ${result.data}');
  }
}

5. 使用 Subscription

sunny_graphql 也支持 GraphQL Subscription。你可以使用 client.subscribe 方法来订阅数据。

import 'package:sunny_graphql/sunny_graphql.dart';

Stream<QueryResult> subscribeToUserUpdates() {
  const String subscription = '''
    subscription OnUserUpdate {
      userUpdate {
        id
        name
      }
    }
  ''';

  final SubscriptionOptions options = SubscriptionOptions(
    document: gql(subscription),
  );

  return client.subscribe(options);
}

6. 处理错误

在执行查询、Mutation 或 Subscription 时，务必处理可能出现的错误。你可以通过检查 QueryResult 的 hasException 属性来判断是否有错误，并通过 exception 属性获取错误信息。

7. 缓存和持久化

sunny_graphql 默认使用 GraphQLCache 来缓存查询结果。你可以根据需要自定义缓存策略，或者使用其他缓存实现。

8. 其他高级功能

sunny_graphql 还支持其他高级功能，如批量请求、文件上传、自定义链接等。你可以参考官方文档来了解更多细节。

9. 清理资源

在应用退出或不再需要 GraphQL 客户端时，记得清理资源，例如取消所有订阅。

client.dispose();

示例应用

以下是一个简单的 Flutter 应用示例，展示了如何使用 sunny_graphql 进行查询和 Mutation：

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

void main() {
  final GraphQLClient client = GraphQLClient(
    link: HttpLink('https://your-graphql-endpoint.com/graphql'),
    cache: GraphQLCache(),
  );

  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final GraphQLClient client;

  MyApp({required this.client});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GraphQL Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () => fetchData(client),
                child: Text('Fetch Data'),
              ),
              ElevatedButton(
                onPressed: () => updateUserData(client),
                child: Text('Update User'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> fetchData(GraphQLClient client) async {
    const String query = '''
      query GetUserData {
        user {
          id
          name
          email
        }
      }
    ''';

    final QueryOptions options = QueryOptions(
      document: gql(query),
    );

    final QueryResult result = await client.query(options);

    if (result.hasException) {
      print('Error: ${result.exception}');
    } else {
      print('Data: ${result.data}');
    }
  }

  Future<void> updateUserData(GraphQLClient client) async {
    const String mutation = '''
      mutation UpdateUser($name: String!) {
        updateUser(name: $name) {
          id
          name
        }
      }
    ''';

    final MutationOptions options = MutationOptions(
      document: gql(mutation),
      variables: <String, dynamic>{
        'name': 'New Name',
      },
    );

    final QueryResult result = await client.mutate(options);

    if (result.hasException) {
      print('Error: ${result.exception}');
    } else {
      print('Updated Data: ${result.data}');
    }
  }
}