Flutter GraphQL请求插件easy_graphql的使用

Flutter GraphQL 请求插件 easy_graphql 的使用

easy_graphql 是一个为 Flutter 提供简单易用接口的库，用于向 GraphQL API 发送查询、变更和订阅请求。

使用

创建 GraphqlClient 实例

要使用 easy_graphql，首先需要创建一个 GraphqlClient 实例：

import 'package:easy_graphql/easy_graphql.dart';

final GraphqlClient client = GraphqlClient(
  url: 'https://example.com/graphql',
  token: 'your-auth-token',
);

GraphqlClient 构造函数接受两个参数：

• url（必需）：GraphQL API 的 URL。
• token（可选）：每个请求附带的身份验证令牌。

发送查询

要发送 GraphQL 查询，调用 GraphqlClient 实例上的 query 方法：

final QueryResult result = await client.query('''
  query {
    users {
      id
      name
      email
    }
  }
''');

query 方法接受两个参数：

• query（必需）：要发送的 GraphQL 查询。
• variables（可选）：包含在查询中的变量。

query 方法返回一个包含查询结果的 QueryResult。

发送变更

要发送 GraphQL 变更，调用 GraphqlClient 实例上的 mutate 方法：

final QueryResult result = await client.mutate('''
  mutation {
    createUser(name: "John", email: "john@example.com") {
      id
      name
      email
    }
  }
''');

mutate 方法接受两个参数：

• mutation（必需）：要发送的 GraphQL 变更。
• variables（可选）：包含在变更中的变量。

mutate 方法返回一个包含变更结果的 QueryResult。

订阅

要订阅 GraphQL 订阅，调用 GraphqlClient 实例上的 subscribe 方法：

final Stream<QueryResult> stream = client.subscribe('''
  subscription {
    newUser {
      id
      name
      email
    }
  }
''');

subscribe 方法接受两个参数：

• subscription（必需）：要订阅的 GraphQL 订阅。
• variables（可选）：包含在订阅中的变量。

subscribe 方法返回一个包含订阅结果的 QueryResult 的流。

缓存查询结果

easy_graphql 自动缓存 GraphQL 查询的结果。要检索缓存的结果，调用 GraphQLCache 实例上的 readQuery 方法：

final QueryResult result = client.cache.readQuery('''
  query {
    users {
      id
      name
      email
    }
  }
''');

readQuery 方法接受一个参数：

• query（必需）：从缓存中检索的 GraphQL 查询。

readQuery 方法返回一个包含查询缓存结果的 QueryResult。

完整示例 Demo

以下是一个完整的 Flutter 应用程序示例，演示如何使用 easy_graphql 库执行查询、变更和订阅。

import 'package:flutter/material.dart';
import 'package:easy_graphql/easy_graphql.dart';
import 'package:graphql/client.dart';

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

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

class _MyAppState extends State<MyApp> {
  EasyGraphql _graphql = EasyGraphql(
    url: 'https://api.example.com/graphql',
    token: 'my_token',
  );

  String _query = '''
    query GetUser(\$id: ID!) {
      user(id: \$id) {
        id
        name
        email
      }
    }
  ''';

  String _mutation = '''
    mutation UpdateUser(\$id: ID!, \$name: String!, \$email: String!) {
      updateUser(id: \$id, name: \$name, email: \$email) {
        id
        name
        email
      }
    }
  ''';

  String _subscription = '''
    subscription OnUserUpdate(\$id: ID!) {
      userUpdate(id: \$id) {
        id
        name
        email
      }
    }
  ''';

  Future<void> _executeQuery() async {
    final QueryResult result = await _graphql.query(
      _query,
      variables: {'id': '1'},
    );

    if (result.hasException) {
      print(result.exception.toString());
    } else {
      print(result.data);
    }
  }

  Future<void> _executeMutation() async {
    final QueryResult result = await _graphql.mutate(
      _mutation,
      variables: {
        'id': '1',
        'name': 'John Doe',
        'email': 'johndoe@example.com',
      },
    );

    if (result.hasException) {
      print(result.exception.toString());
    } else {
      print(result.data);
    }
  }

  Stream<QueryResult> _executeSubscription() {
    return _graphql.subscribe(
      _subscription,
      variables: {'id': '1'},
    );
  }

  [@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: _executeQuery,
                child: Text('Execute Query'),
              ),
              ElevatedButton(
                onPressed: _executeMutation,
                child: Text('Execute Mutation'),
              ),
              StreamBuilder<QueryResult>(
                stream: _executeSubscription(),
                builder: (BuildContext context,
                    AsyncSnapshot<QueryResult> snapshot) {
                  if (snapshot.hasError) {
                    return Text('Error: ${snapshot.error}');
                  }

                  if (!snapshot.hasData) {
                    return Text('Loading...');
                  }

                  final QueryResult result = snapshot.data;

                  if (result.hasException) {
                    return Text('Exception: ${result.exception.toString()}');
                  } else {
                    return Text('Subscription: ${result.data}');
                  }
                },
              ),
            ]),
      ),
    ));
  }
}