Flutter x GraphQL

– 4分钟阅读

作为一个前端开发员，我已经在很多使用REST API的项目上工作了很长时间，在与REST交互时，我注意到了一些低效率的问题。

源代码中有很多端点，我需要处理这些端点。
即使我只想在我的用户界面上显示一个字段，但服务器可能会向我提供更多不必要的数据。
要花很多时间与后端团队沟通以澄清API文件。
请求对象的结构（前端方面）必须依赖于服务器方面。

你是否曾经因为上述原因而浪费了大量的时间？好吧，如果你的回答是 “是“，那么GraphQL将为你节省时间。

那么，GraphQL究竟是什么？

GraphQL是一种查询语言和应用程序接口（API）的服务器端运行时间，它优先为客户提供他们所要求的数据，而不是更多。

GraphQL旨在使API快速、灵活和对开发者友好。它甚至可以部署在一个被称为GraphiQL的集成开发环境（IDE）中。作为REST的替代方案，GraphQL让开发者构建请求，在一次API调用中从多个数据源中提取数据。

–Redhat.com

当你读到上面的定义时，我相信你会想到SQL（结构化查询语言），并回忆起大一的时候的 “传奇 “术语，如SELECT、INSERT、UPDATE、DELETE 和WHERE。

之后，这个定义让你想起了REST，我肯定你会想到另一个传奇的术语。C.R.U.D，对吗？

现在，如果我们得到的东西结合了所有这些传奇的流行语呢？是的，拯救我时间的人诞生了**–GraphQL。**

在本文的范围内，我们将从前端的角度开始介绍GraphQL的基本概念。

GraphQL操作

有三种主要的GraphQL操作类型。查询、突变、订阅。

让我们假设我们的模式中有一个模型ticket ，这个模型包含三个字段。id, status, created_at

查询（一个只读的取数

1.取出多个条目

2.获取一个单独的条目

变更（修改后再取）。

1.增加一个单项

2.更新一个条目

3.删除一个条目

订阅（一个实时数据的查询

现在，让我们把它应用于Flutter

首先，为了使用GraphQL，你需要一个服务器库（除非你有一个坚实的后台团队）。有很多支持的服务器库，但我衷心地建议你使用GraphCMS。

其次，为了让你的Flutter项目能够使用GraphQL，你需要一个GraphQL客户端，以便与服务器进行通信，在pub.dev上有一些很棒的库，比如这个graphql_flutter和这个渡口。

编码时间!

以下所有的脚本和相关的东西都可以在这个 repo 中找到：fluttour）。在你开始之前，请看一下README。

下面是我们要做的事情。

创建一个基本的GraphQLAPIClient。
创建一个异步函数，包含我们希望在扩展自GraphQLAPIClient的类中执行的_突变/查询/订阅_ 文件。然后，处理异常并从响应中解析数据。
在我们的提供者类中创建另一个异步函数，该类扩展自ChangeNotifier，调用步骤2的函数并开始数据处理。
通知监听器，来自服务器的数据可能已经改变。

创建一个基本的GraphQLAPIClient

> api_client.dart
复制代码

在这里，我们创建了一个私有的**_client**函数，返回一个GraphQLClient构造函数

cache。 要在数据存储中使用的初始缓存。
链接。 GraphQL文件将被解析成一个响应的链接。在这种情况下，我们使用的是HttpLink，我们将把它与 AuthLink ，以附加我们的GraphCMS公共标记。
defaultPolicies。 为每个客户端动作设置的默认策略。

之后，我们创建一个查询函数来执行我们的查询。

Future<QueryResult> query(String queries) async {  final WatchQueryOptions _options = WatchQueryOptions(    document: gql(queries),    pollInterval: Duration(seconds: 15),    fetchResults: true,  );  return await _client().query(_options);}
复制代码

现在我们创建一个突变函数，将突变结果发送到服务器上。

Future<QueryResult> mutation(String queries) async {  final MutationOptions _options = MutationOptions(    document: gql(queries),  );  return await _client().mutate(_options);}
复制代码

很酷吧？

创建一个请求

在扩展自GraphQLAPIClient的类里面，我们创建一个请求函数，将mutate/query/subscription 到服务器。

Future<T> get() async {  String your_query= """    query {          /// write your query      }  """;
复制代码

对于突变，你所要做的就是把this.query 改为this.mutation

在你的提供者类里面进行数据处理/通知监听器

Future<void> get() async {  final result = await this._request.get();  if (result != null) { } else { }  // handle data & notify the listeners here.  // there are a bunch of ways to notify the listeners,   // in this example, I'm using the delegation pattern and  // notifyListeners function.
复制代码