在 GraphQL 中使用 Flutter-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言和运行时环境。在前端开发中，GraphQL 可以用于优化网络请求，减少不必要的数据传输，从而提高应用性能。Flutter 是一种移动开发框架，可以轻松地创建多平台应用。在本篇文章中，将介绍如何在 Flutter 中使用 GraphQL。

安装依赖

要在 Flutter 中使用 GraphQL，需要安装两个包：graphql 和 graphql_flutter。其中，graphql 包提供 GraphQL 核心功能，graphql_flutter 包将其整合到 Flutter 中，方便了开发。可以使用下面的命令安装：

$ flutter pub add graphql
$ flutter pub add graphql_flutter

发起 GraphQL 请求

首先，需要创建一个 GraphQL 客户端，以便向服务器发起请求。创建 GraphQL 客户端需要一个 GraphQL API 的 URL 和一个 HttpLink。HttpLink 是一个用于将 GraphQL 查询发送到远程 API 的 Dart 包装器。

// javascriptcn.com 代码示例
import 'package:graphql/client.dart';

final HttpLink _httpLink = HttpLink(
  uri: 'https://your-graphql-api.com/graphql',
);

final GraphQLClient _client = GraphQLClient(
  cache: InMemoryCache(),
  link: _httpLink,
);

在创建客户端之后，可以使用送查询语句的 gql 函数来发起请求。 gql 函数需要一个字符串参数，该参数将包含 GraphQL 查询语句。

// javascriptcn.com 代码示例
final String query = '''
  query {
    users {
      id
      name
    }
  }
''';

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

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

在这个例子中，查询语句将返回用户 ID 和姓名的列表。在发送查询后，结果将包含查询数据和错误信息（如果有）。可以使用 result.data 和 result.errors 属性来获取它们。如果没有错误，则 result.errors 为 null。

使用 GraphQL Widgets

graphql_flutter 包提供了几种 Flutter Widget，可用于在 Flutter 中显示 GraphQL 数据。如果数据发送更改，这些小部件将自动重新构建，以更新 UI。其中，最常用的两个 Widget 是 Query 和 Mutation。Query 将在发起 GraphQL 查询时执行，而 Mutation 将在更改数据时执行。

以下是一个示例代码，它使用了 Query Widget 来显示 GraphQL 查询结果。

// javascriptcn.com 代码示例
import 'package:graphql_flutter/graphql_flutter.dart';

class UsersPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Query(
      options: QueryOptions(
        document: gql('query { users { id name } }'),
      ),
      builder: (QueryResult result, { VoidCallback refetch }) {
        if (result.hasException) {
          return Text(result.exception.toString());
        }

        if (result.loading) {
          return CircularProgressIndicator();
        }

        final List<dynamic> users = result.data['users'];

        return ListView.builder(
          itemCount: users.length,
          itemBuilder: (BuildContext context, int index) {
            final Map<String, dynamic> user = users[index];

            return ListTile(
              leading: Text(user['id']),
              title: Text(user['name']),
            );
          },
        );
      },
    );
  }
}

Query Widget 接收一个 options 参数，该参数包含查询语句和其他选项（例如变量和错误处理程序）。这个例子中，查询将从 GraphQL 服务器请求用户 ID 和姓名的列表。在执行查询后，Query Widget 将根据查询状态构建 UI。如果查询正在加载，则显示一个圆形进度指示符。如果查询成功，它将解析结果并在 ListTile 中显示每个用户的信息。如果查询失败，则显示错误消息。

Mutation Widget 可用于更改数据。它与 Query Widget 类似，但需要一个 mutation 选项，它将包含更改数据的 GraphQL 语句。此外，Mutation Widget 还可以将更改后的数据更新到 UI 中。

总结

在本文章中，我们介绍了在 Flutter 中使用 GraphQL 的基本知识和技术。使用 GraphQL，可以轻松地优化网络请求和减少数据传输，从而提高应用性能。使用 graphql_flutter 包，可以将 GraphQL 客户端集成到 Flutter 中，并使用 Query 和 Mutation Widget 从服务器请求数据和更改数据。使用 GraphQL，可以轻松地处理大数据，节省内存和网络资源。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6531e89d7d4982a6eb3f235a