前言：2023年，新年開始偶的第一篇博客，來講講如何拋棄GraphQL，使用Dio來請(qǐng)求GraphQL。在Flutter興起的時(shí)候呢，正好GraphQL也有點(diǎn)勢(shì)頭。正好我們那時(shí)候也在研究怎么玩轉(zhuǎn)GraphQL，自己想要什么字段就傳什么字段，感覺挺好的。正好公司決策用Flutter開發(fā)新的App。這時(shí)候GraphQL得走出研究文檔，開始實(shí)戰(zhàn)了。

之前關(guān)于GraphQL的文章：

《Flutter中使用GraphQL進(jìn)行數(shù)據(jù)請(qǐng)求》
《Flutter GraphQL中如何攔截獲取HttpCode》

一、原由

其實(shí)一開始我們一直都是用的第三方庫：graphql_flutter，來做GraphQl請(qǐng)求的，相關(guān)方法和異常捕獲都在往前的博客中講到了。

但是，用的還是不很很爽。它有以下問題：

• 1. 有時(shí)候網(wǎng)絡(luò)，或者服務(wù)器繁忙的時(shí)候請(qǐng)求回不來；
• 2. 不能被代理抓包；
• 3. 不能被Sentry等監(jiān)控平臺(tái)捕獲請(qǐng)求；
• 4. GraphQL請(qǐng)求比Dio慢；
• 5. Graph和Dio在項(xiàng)目中同時(shí)存在，過于冗于；

二、GraphQL原理

如果深究GraphQL第三方庫的話，其實(shí)你會(huì)發(fā)現(xiàn)其實(shí)它也是發(fā)起的Http請(qǐng)求。這里就不一一展示了。知道了這個(gè)要點(diǎn)的話，我們就可以開始改造了。

三、貍貓換太子

3.1 在換太子之前我們先理一下我們?cè)撛趺醋觯?/h6>

• 1. GraphQL是發(fā)出post請(qǐng)求；
• 2. GraphQL需要將graph sql請(qǐng)求語言以鍵值對(duì)body形式作為請(qǐng)求參數(shù)；

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的請(qǐng)求地址，例如："https://${baseUrl}/euma-graphql";
• graphSQL: 就是請(qǐng)求Graph sql查詢語句，它需要序列化，然后以“query”為鍵值對(duì)。例如:

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

四、總結(jié)

將GraphQL改造為Dio發(fā)起請(qǐng)求就改造完了，非常簡單，可以移除GraphQL第三庫了。改造之后，優(yōu)勢(shì)也很明顯：

• 1. 遇到網(wǎng)絡(luò)請(qǐng)求，或者超時(shí)可以返回了；
• 2. 請(qǐng)求速度快了；頁面不再一直轉(zhuǎn)了；
• 3. GraphQL的請(qǐng)求可以進(jìn)行抓包了；
• 4. GraphQL可以被Sentry進(jìn)行流量網(wǎng)絡(luò)監(jiān)控了；
• 5. GraphQL庫可以干掉了O(∩_∩)O哈哈~

Over~
祝大家新年快樂，大展宏??，元宵節(jié)快樂~