Flutter中使用GraphQL进行数据请求

先稍稍预告一波~，这个月可能会高产胜母猪...

今天我们聊的是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哈哈~ 这里是讲不完咯~

申明：禁用于商业用途，如若转载，请附带原文链接。//www.greatytc.com/p/a4139eecb26a蟹蟹~

PS: 写文不易，觉得没有浪费你时间，请给个关注和点赞~ 😁