前言：2023年，新年开始偶的第一篇博客，来讲讲如何抛弃GraphQL，使用Dio来请求GraphQL。在Flutter兴起的时候呢，正好GraphQL也有点势头。正好我们那时候也在研究怎么玩转GraphQL，自己想要什么字段就传什么字段，感觉挺好的。正好公司决策用Flutter开发新的App。这时候GraphQL得走出研究文档，开始实战了。
之前关于GraphQL的文章：
《Flutter中使用GraphQL进行数据请求》
《Flutter GraphQL中如何拦截获取HttpCode》
一、原由
其实一开始我们一直都是用的第三方库：graphql_flutter，来做GraphQl请求的，相关方法和异常捕获都在往前的博客中讲到了。
但是，用的还是不很很爽。它有以下问题：
- 有时候网络，或者服务器繁忙的时候请求回不来；
- 不能被代理抓包；
- 不能被Sentry等监控平台捕获请求；
- GraphQL请求比Dio慢；
- Graph和Dio在项目中同时存在，过于冗于；
二、GraphQL原理
如果深究GraphQL第三方库的话，其实你会发现其实它也是发起的Http请求。这里就不一一展示了。知道了这个要点的话，我们就可以开始改造了。
三、狸猫换太子
3.1 在换太子之前我们先理一下我们该怎么做：
- GraphQL是发出post请求；
- 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第三库了。改造之后，优势也很明显：
- 遇到网络请求，或者超时可以返回了；
- 请求速度快了；页面不再一直转了；
- GraphQL的请求可以进行抓包了；
- GraphQL可以被Sentry进行流量网络监控了；
- GraphQL库可以干掉了O(∩_∩)O哈哈~
Over~
祝大家新年快乐，大展宏🐰，元宵节快乐~
