先稍稍预告一波~，这个月可能会高产胜母猪...
今天我们聊的是GraphQL，其实我觉得应该不用去对它进行解释，搜到这来的，还能没吃过猪肉？
官网描述
GraphQL是Facebook发明的，GraphQL 是 Facebook 于 2012 年在内部开发的数据查询语言，在 2015 年开源，旨在提供 RESTful 架构体系的替代方案。GraphQL可以看成是Graph+QL，其中QL是Query Language的简称，所以GraphQL的意思是可视化（图形化）查询语言，是一种描述客户端如何向服务端请求数据的API语法，类似于 RESTful API 规范。SQL(Structured Query Language) 是结构化查询语言的简称，你应该大概理解GraphQL是啥了，但是要注意，虽然GraphQL名字叫查询语言，但是跟数据库其实没啥关系
一、GraphQL 设计出来解决什么问题？
其实很明显，就是想替代Restful，不然Facebook吃饱了撑的，没事找事给整出另外一个查询语言来。
试想一下，我们之前用Restfull，进行接口调用的时候。因为后端的设计，可能一个复杂点的页面，我们移动前端可能需要使用多个接口去拿数据，因为一个接口代表了一种行为。那这样的话，我们是不是得一个接口调用之后，用它的数据去调另外一个接口，系不系很麻烦，也不简洁明了。
然而GraphQL就是为了解决这个问题，它是一种查询语言，在后端同学基于ADD定义好查询结构之后，可以把它想象为定义了一个数据库表结构。然后当我们想去调用接口获取数据的时候，我们就可以类似于查询数据库一样，按定义好的结构，写一些查询QL语句，就可以返回所有我们可能之前需要几个接口才能取回的数据，而且想要什么数据，不想要什么数据都可以自己修改查询语句，当然前提是后端有这个字段。那这样一个页面就一个接口可以搞定了。真香~
但是，有一说一。现在GraphQL并没有火起来，可能过于理想化，它对于应对查询接口替换的时候可以很好用，对于一些post等操作，还得Restfull大哥来干，所以项目中可能两种混搭，这里主要是讲一讲在Flutter中如何使用GraphQL来进行接口调用，提供一种思路。
有一说一，本篇文章基于3.1.0一下做讲解，4.0.0和4.1.0貌似有点改动，可能需要修改，这里没有去跟踪了。后面会直接上Flutter2.0 支持空安全Null-Safety版本l聊五毛钱的~
二、引入graphql_flutter第三方库
因为我们是需要在Flutter中使用，所以我们需要使用到graphql_flutter这个第三方库
在flutter工程的pubspec.yaml文件中添加：
dependencies:
graphql_flutter: 3.1.0
然后执行flutter pub get命令。
三、自己定义一个GraphQLUtil工具类
这里的话我们可能需要定义一个GraphQLUtil工具类，或者说定义一个单例，方便后面的GraphQL接口调用。
class GraphQLUtil {
static GraphQLUtil _instance;
String domain;
factory GraphQLUtil({String domain}) => _getInstance(domain: domain);
GraphQLUtil._internal(String domain) {
this.domain = domain;
}
static GraphQLUtil _getInstance({String domain}) {
if (null == _instance) {
_instance = GraphQLUtil._internal(domain);
}
return _instance;
}
Future<GraphQLClient> getGraphQLClient() async {
Map<String, String> headers = {...};
//domain代表后端同学给我们的GraphQL链接地址
HttpLink httpLink = HttpLink(uri: this.domain, headers: headers);
//这里是自己定义的Link用于拦截GraphQL中的HttpCode, 这里可以先不看
// BackendErrorLink errorLink =
// BackendErrorLink(httpResponseHandler: (fetchResult, streamResponse) {
// dealWithGraphQlErrorCode(streamResponse);
// });
//end
GraphQLClient client =
GraphQLClient(cache: InMemoryCache(), link: httpLink);
return client;
}
/**
* hql: 我们自己定义的GraphQL 查询语句
*/
Future<QueryResult> query(String hql) async {
Response networkResponse = await NetWorkUtil.getNetWorkErrorResponse();
if(networkResponse == null) { //这里是自己实现的有无网络判断
QueryOptions options = QueryOptions(documentNode: gql(hql));
GraphQLClient client = await getGraphQLClient();
QueryResult queryResult = await client?.query(options);
//异常捕获，但是这里值得注意的是这里的异常被graph_flutter包装了，不会返回http的statusCode
if (queryResult.hasException) {
LogUtil.e(queryResult.exception.toString());
}
return queryResult;
}else{
//do something
return null;
}
}
get client => getGraphQLClient();
void dispose() {
_instance = null;
}
}
上面就是我们自己定义好的额GraphQLUtil工具类，它实现了单例和query方法。在我们使用GraphQL中，有一点值得我们注意的：想上面代码中的注释一样queryResult.hasException，这里捕获了GraphQL在查询中的报错，但是这里的异常被graph_flutter包装了，不会返回http的statusCode。所以这里就会诞生我们下一篇文章《Flutter GraphQL中如何拦截获取httpCode》，后面会陆续的上的。敬请期待呗~
三、定义GraphQL的查询语句
GraphQL的查询语句其实还是挺简单的，就是因为之前在Flutter使用GraphQL的时候，其实很不情愿写GraphQL查询语句的，感觉挺繁琐的，虽然不然。因为你既要定义GraphQL查询语句，还要定义其对应的entity解析类。
那时候我就在寻找是否我定义好了Entity之后，就有工具帮我生成对应的GraphQL查询语句(ps: 懒癌综合症~)，很遗憾，偶并没有找到，所以还是得老老实实的写查询语句，后期继续找找或者试着自己给它整一个试试吧。再说再说~ O(∩_∩)O哈哈~
static var demoGraphQLSQL = '''
query { //query字段是GraphQL查询语句必须要的，它将包裹下面所要查询的数据结构
basicInfo{
accountSettings{
student{
name,
goals,
}
}
}
}
''';
&enspGraphQL查询语句其实蛮简单的， 首先我这里是定义了一个专门定义查询语句的类graphql_sql.dart，然后类似像定义String一样。
-
首先query字段是GraphQL查询语句必须要的，它将包裹下面所要查询的数据结构
-
然后将数据结构填充进入query{需要查询的数据结构}包围中，对应我上面的代码块，就是basicInfo{....}这一块内容
-
而对应的填入的结构，那就要看你们是取什么数据，后端同学设计了什么结构，一般后端接入GraphQL后，GraphQL本身就会生成一个测试调用和查询GraphQL结构的链接，这个可以找后端同学要一下，直接在网页编写查询语句，调用成功后，复制到项目中。类似于下图2.2:
-
拿到后端同学给到的GraphQL测试和查询链接打开后，首先需要在图2.1中，点击1处，输入你app应用需要调用到的token，然后刷新就可以看到GraphQL后端同学定义的数据结构了，就可以按照它进行编写查询语句。
图2.1
-
在图2.2中，1处就是填写查询语句的地方；2处是编写好查询语句点击Send Request后，返回的结果；3处就是后端同学定义的GraphQL查询的数据结构，我们查询需要按照它的层级来进行。
图2.2
三、调用GraphQL进行查询数据
下面就直接上代码了，其实很简单，我们前面已经在GraphQLUtil.dart中定义好了GraphQL初始化和调用方法，这里就直接传入GraphQL查询语句进行调用就行了。然后就是解析数据的问题了。
Future getDemoGraphQLData() async {
try {
QueryResult queryResult = await GraphQLUtil().query(
GraphSQL.demoGraphQLSQL);
if (queryResult != null && queryResult.data != null) {
//这里就可以对GraphQL返回的查询数据进行解析了
....
}
}catch(error){
LogUtil.e(error.toString());
}
return Future.value();
}
四、遗留问题
现在使用graph_flutter这个库呢，还是有点小小的问题的，拿数据并没啥问题，可以它并不能直接获取到http的状态码，即使调用失败，也只是返回它包装好的异常信息。 这就坑爹了，比如和后端定义好的403：token过期退出登录等等就成了摆设了。
这恐怕不得行吧，所以我们需要自己定义拦截Http状态码的Link，这样的话我们就可以拦截获取状态码，来干一些不可描述的事儿了。这里的内容我们下面一章再讲！O(∩_∩)O哈哈~ 这里是讲不完咯~
申明：禁用于商业用途，如若转载，请附带原文链接。https://www.jianshu.com/p/a4139eecb26a蟹蟹~
PS: 写文不易，觉得没有浪费你时间，请给个关注和点赞~ 😁
网友评论