Flutter中使用Dio代替GraphQL请求

前言：2023年，新年开始偶的第一篇博客，来讲讲如何抛弃GraphQL，使用Dio来请求GraphQL。在Flutter兴起的时候呢，正好GraphQL也有点势头。正好我们那时候也在研究怎么玩转GraphQL，自己想要什么字段就传什么字段，感觉挺好的。正好公司决策用Flutter开发新的App。这时候GraphQL得走出研究文档，开始实战了。

之前关于GraphQL的文章：

《Flutter中使用GraphQL进行数据请求》
《Flutter GraphQL中如何拦截获取HttpCode》

一、原由

其实一开始我们一直都是用的第三方库：graphql_flutter，来做GraphQl请求的，相关方法和异常捕获都在往前的博客中讲到了。

但是，用的还是不很很爽。它有以下问题：

• 1. 有时候网络，或者服务器繁忙的时候请求回不来；
• 2. 不能被代理抓包；
• 3. 不能被Sentry等监控平台捕获请求；
• 4. GraphQL请求比Dio慢；
• 5. Graph和Dio在项目中同时存在，过于冗于；

二、GraphQL原理

如果深究GraphQL第三方库的话，其实你会发现其实它也是发起的Http请求。这里就不一一展示了。知道了这个要点的话，我们就可以开始改造了。

三、狸猫换太子

3.1 在换太子之前我们先理一下我们该怎么做：

• 1. GraphQL是发出post请求；
• 2. GraphQL需要将graph sql请求语言以键值对body形式作为请求参数；

3.2 说干就干

整体如下，就简简单单，潇潇洒洒的几行代码：、

  Future queryGraphQLByHttp(String graphSQL, String function) async {
    dynamic graphQLResponse = await Dio().post(RequestUrl.graphQLBaseUrl,
        data: json.encode({
          "query": graphSQL
        }),
    );
    return graphQLResponse;
  }

• RequestUrl.graphQLBaseUrl：是GraphQL的请求地址，例如："https://${baseUrl}/euma-graphql";
• graphSQL: 就是请求Graph sql查询语句，它需要序列化，然后以“query”为键值对。例如:

  static var queryUserPermissionInfo = '''
    query {
      basicInfo{
        userPermissions {
          notification 
        }
      }
    }
  ''';

四、总结

将GraphQL改造为Dio发起请求就改造完了，非常简单，可以移除GraphQL第三库了。改造之后，优势也很明显：

• 1. 遇到网络请求，或者超时可以返回了；
• 2. 请求速度快了；页面不再一直转了；
• 3. GraphQL的请求可以进行抓包了；
• 4. GraphQL可以被Sentry进行流量网络监控了；
• 5. GraphQL库可以干掉了O(∩_∩)O哈哈~

Over~
祝大家新年快乐，大展宏🐰，元宵节快乐~