flutter_robusta_graphql 是一个为 Flutter 应用提供 GraphQL 客户端功能的插件，它基于 graphql_flutter 插件，并与 robusta 状态管理库集成。通过这个插件，你可以轻松地在 Flutter 应用中执行 GraphQL 查询、变更和订阅。

以下是如何使用 flutter_robusta_graphql 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_robusta_graphql 依赖：

dependencies:
  flutter:
    sdk: flutter
  robusta:
  flutter_robusta_graphql:

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

2. 初始化 GraphQL 客户端

在你的应用中初始化 GraphQL 客户端。通常你可以在应用的启动文件中进行初始化。

import 'package:flutter/material.dart';
import 'package:robusta/robusta.dart';
import 'package:flutter_robusta_graphql/flutter_robusta_graphql.dart';

void main() {
  final app = Application(
    extensions: [
      GraphQLExtension(
        client: GraphQLClient(
          cache: GraphQLCache(),
          link: HttpLink('https://your-graphql-endpoint.com/graphql'),
        ),
      ),
    ],
    child: MyApp(),
  );

  runApp(app);
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GraphQL Demo',
      home: HomeScreen(),
    );
  }
}

3. 使用 GraphQL 查询

你可以在任何 widget 中使用 GraphQLQuery 来执行 GraphQL 查询。

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

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GraphQL Demo'),
      ),
      body: GraphQLQuery(
        query: '''
          query GetUsers {
            users {
              id
              name
              email
            }
          }
        ''',
        builder: (QueryResult result) {
          if (result.isLoading) {
            return Center(child: CircularProgressIndicator());
          }

          if (result.hasException) {
            return Center(child: Text('Error: ${result.exception}'));
          }

          final users = result.data?['users'] as List?;

          return ListView.builder(
            itemCount: users?.length ?? 0,
            itemBuilder: (context, index) {
              final user = users?[index];
              return ListTile(
                title: Text(user?['name'] ?? ''),
                subtitle: Text(user?['email'] ?? ''),
              );
            },
          );
        },
      ),
    );
  }
}

4. 使用 GraphQL 变更

你可以使用 GraphQLMutation 来执行 GraphQL 变更操作。

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

class AddUserScreen extends StatelessWidget {
  final TextEditingController nameController = TextEditingController();
  final TextEditingController emailController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add User'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            SizedBox(height: 20),
            GraphQLMutation(
              mutation: '''
                mutation AddUser(\$name: String!, \$email: String!) {
                  addUser(name: \$name, email: \$email) {
                    id
                    name
                    email
                  }
                }
              ''',
              variables: {
                'name': nameController.text,
                'email': emailController.text,
              },
              builder: (RunMutation runMutation, QueryResult? result) {
                return ElevatedButton(
                  onPressed: () {
                    runMutation();
                  },
                  child: Text('Add User'),
                );
              },
              onCompleted: (dynamic data) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('User added successfully!')),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

5. 使用 GraphQL 订阅

你还可以使用 GraphQLSubscription 来订阅 GraphQL 事件。

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

class UserUpdatesScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Updates'),
      ),
      body: GraphQLSubscription(
        subscription: '''
          subscription OnUserAdded {
            userAdded {
              id
              name
              email
            }
          }
        ''',
        builder: (QueryResult result) {
          if (result.isLoading) {
            return Center(child: CircularProgressIndicator());
          }

          if (result.hasException) {
            return Center(child: Text('Error: ${result.exception}'));
          }

          final user = result.data?['userAdded'];

          return ListTile(
            title: Text(user?['name'] ?? ''),
            subtitle: Text(user?['email'] ?? ''),
          );
        },
      ),
    );
  }
}