Flutter GraphQL查询插件simple_gql的使用

一个GraphQL库。相当精简且易于使用。 GQL订阅目前尚未处理。

使用方法

一个简单的使用示例：

// /!\ 注意：此示例中使用的API可能已不再存在。
import 'package:simple_gql/simple_gql.dart';

void main() async {
  try {
    // 创建一个GQLClient实例并指定GraphQL服务器的URL
    final response = await GQLClient(
      'https://graphqlzero.almansi.me/api', // 这里替换为你自己的GraphQL服务器地址
    ).query(
      query: r'''
        query todos($options: PageQueryOptions) {
          todos(options: $options) {
            data {
              id
              title
              completed
              user {
                id
                username
                website
              }
            }
          }
        }
      ''',
      variables: {
        'options': {
          'paginate': {
            'page': 0,
            'limit': 1,
          },
        },
      },
    );

    // 打印成功信息和响应数据
    print('Yay, success ! :D');
    print(response);
  } on GQLError catch (e) {
    // 处理GraphQL错误
    print('Ouch ! :(');
    print(e);
  } catch (e) {
    // 处理网络错误或其他异常
    print('Probably a network error');
    print(e);
  }
}

完整示例Demo

以下是完整的示例代码，可以将其保存为 main.dart 文件并在你的Flutter项目中运行。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("simple_gql 示例"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                // 创建一个GQLClient实例并指定GraphQL服务器的URL
                final response = await GQLClient(
                  'https://graphqlzero.almansi.me/api', // 这里替换为你自己的GraphQL服务器地址
                ).query(
                  query: r'''
                    query todos($options: PageQueryOptions) {
                      todos(options: $options) {
                        data {
                          id
                          title
                          completed
                          user {
                            id
                            username
                            website
                          }
                        }
                      }
                    }
                  ''',
                  variables: {
                    'options': {
                      'paginate': {
                        'page': 0,
                        'limit': 1,
                      },
                    },
                  },
                );

                // 打印成功信息和响应数据
                print('Yay, success ! :D');
                print(response);
              } on GQLError catch (e) {
                // 处理GraphQL错误
                print('Ouch ! :(');
                print(e);
              } catch (e) {
                // 处理网络错误或其他异常
                print('Probably a network error');
                print(e);
              }
            },
            child: Text("执行GraphQL查询"),
          ),
        ),
      ),
    );
  }
}

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

sinazl 1楼•4 天前

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

当然，以下是一个使用 simple_gql 插件在 Flutter 中执行 GraphQL 查询的示例代码。这个示例假设你已经有一个 GraphQL 服务器端点，并且你知道如何定义一个有效的查询。

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

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

然后运行 flutter pub get 来获取依赖项。

接下来，你可以按照以下步骤在 Flutter 应用中使用 simple_gql 进行 GraphQL 查询。

定义 GraphQL 客户端

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GraphQLClient _client = GraphQLClient(
    endpoint: 'https://your-graphql-endpoint.com/graphql', // 替换为你的GraphQL端点
  );

  Future<void> _executeQuery() async {
    // 定义你的GraphQL查询
    final String query = r'''
      query GetUser($id: ID!) {
        user(id: $id) {
          id
          name
          email
        }
      }
    ''';

    // 定义查询变量
    final Map<String, dynamic> variables = {'id': '1'};

    // 执行查询
    final Result result = await _client.query(
      QueryOptions(
        document: gql(query),
        variables: variables,
      ),
    );

    // 处理查询结果
    if (result.hasException) {
      print('Error: ${result.exception?.message}');
    } else if (result.data != null) {
      final Map<String, dynamic> userData = result.data!['user'] as Map<String, dynamic>;
      print('User ID: ${userData['id']}');
      print('User Name: ${userData['name']}');
      print('User Email: ${userData['email']}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter GraphQL Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _executeQuery,
          child: Text('Execute Query'),
        ),
      ),
    );
  }
}

解释代码

GraphQLClient：初始化 GraphQL 客户端，指定 GraphQL 服务器的端点。
gql：用于标记 GraphQL 查询字符串，它确保字符串不会被 Dart 的字符串插值干扰。
QueryOptions：包含查询文档和变量。
_executeQuery 方法：定义 GraphQL 查询字符串和变量，执行查询，并处理结果。
在按钮点击时调用 _executeQuery 方法。

运行应用

确保你已经正确配置了 Flutter 开发环境，然后运行应用：

flutter run

点击按钮后，你应该能在控制台中看到查询结果。

这个例子展示了如何使用 simple_gql 插件在 Flutter 应用中执行一个简单的 GraphQL 查询。根据你的需求，你可以扩展这个示例来处理更复杂的查询、变更（mutation）和订阅（subscription）。