Flutter x GraphQL

前端小工發表於2021-07-05
Flutter

Flutter x GraphQL

DUBV

DUBV

遵循

7月1日

- 4分鐘閱讀

作為一個前端開發員，我已經在很多使用REST API的專案上工作了很長時間，在與REST互動時，我注意到了一些低效率的問題。

  • 原始碼中有很多端點，我需要處理這些端點。
  • 即使我只想在我的使用者介面上顯示一個欄位，但伺服器可能會向我提供更多不必要的資料。
  • 要花很多時間與後端團隊溝通以澄清API檔案。
  • 請求物件的結構（前端方面）必須依賴於伺服器方面。

你是否曾經因為上述原因而浪費了大量的時間？好吧，如果你的回答是 "是"，那麼GraphQL將為你節省時間。

那麼，GraphQL究竟是什麼？

GraphQL是一種查詢語言和應用程式介面（API）的伺服器端執行時間，它優先為客戶提供他們所要求的資料，而不是更多。

GraphQL旨在使API快速、靈活和對開發者友好。它甚至可以部署在一個被稱為GraphiQL的整合開發環境（IDE）中。作為REST的替代方案，GraphQL讓開發者構建請求，在一次API呼叫中從多個資料來源中提取資料。

-Redhat.com

當你讀到上面的定義時，我相信你會想到SQL（結構化查詢語言），並回憶起大一的時候的 "傳奇 "術語，如SELECT、INSERT、UPDATE、DELETE 和WHERE。

之後，這個定義讓你想起了REST，我肯定你會想到另一個傳奇的術語。C.R.U.D，對嗎？

現在，如果我們得到的東西結合了所有這些傳奇的流行語呢？是的，拯救我時間的人誕生了**--GraphQL。**

在本文的範圍內，我們將從前端的角度開始介紹GraphQL的基本概念。

GraphQL操作

有三種主要的GraphQL操作型別。查詢、突變、訂閱。

讓我們假設我們的模式中有一個模型ticket ，這個模型包含三個欄位。id, status, created_at

查詢（一個只讀的取數

1.取出多個條目

2.獲取一個單獨的條目

變更（修改後再取）。

1.增加一個單項

2.更新一個條目

3.刪除一個條目

訂閱（一個實時資料的查詢

現在，讓我們把它應用於Flutter

首先，為了使用GraphQL，你需要一個伺服器庫（除非你有一個堅實的後臺團隊）。有很多支援的伺服器庫，但我衷心地建議你使用GraphCMS。

其次，為了讓你的Flutter專案能夠使用GraphQL，你需要一個GraphQL客戶端，以便與伺服器進行通訊，在pub.dev上有一些很棒的庫，比如這個graphql_flutter和這個渡口。

編碼時間!

以下所有的指令碼和相關的東西都可以在這個 repo 中找到：fluttour）。在你開始之前，請看一下README。

下面是我們要做的事情。

  1. 建立一個基本的GraphQLAPIClient。
  2. 建立一個非同步函式，包含我們希望在擴充套件自GraphQLAPIClient的類中執行的_突變/查詢/訂閱_ 檔案。然後，處理異常並從響應中解析資料。
  3. 在我們的提供者類中建立另一個非同步函式，該類擴充套件自ChangeNotifier，呼叫步驟2的函式並開始資料處理。
  4. 通知監聽器，來自伺服器的資料可能已經改變。

建立一個基本的GraphQLAPIClient

> api_client.dart
複製程式碼

在這裡，我們建立了一個私有的**_client**函式，返回一個GraphQLClient建構函式

  • cache。 要在資料儲存中使用的初始快取。
  • 連結。 GraphQL檔案將被解析成一個響應的連結。在這種情況下，我們使用的是HttpLink，我們將把它與 AuthLink ，以附加我們的GraphCMS公共標記。
  • defaultPolicies。 為每個客戶端動作設定的預設策略。

之後，我們建立一個 查詢函式來執行我們的查詢。

Future<QueryResult> query(String queries) async {  final WatchQueryOptions _options = WatchQueryOptions(    document: gql(queries),    pollInterval: Duration(seconds: 15),    fetchResults: true,  );  return await _client().query(_options);}
複製程式碼

現在我們建立一個 突變函式，將突變結果傳送到伺服器上。

Future<QueryResult> mutation(String queries) async {  final MutationOptions _options = MutationOptions(    document: gql(queries),  );  return await _client().mutate(_options);}
複製程式碼

很酷吧？

建立一個請求

在擴充套件自GraphQLAPIClient的類裡面，我們建立一個請求函式，將mutate/query/subscription 到伺服器。

Future<T> get() async {  String your_query= """    query {          /// write your query      }  """;
複製程式碼

對於 突變，你所要做的就是把this.query 改為this.mutation

在你的提供者類裡面進行資料處理/通知監聽器

Future<void> get() async {  final result = await this._request.get();  if (result != null) { } else { }  // handle data & notify the listeners here.  // there are a bunch of ways to notify the listeners,   // in this example, I'm using the delegation pattern and  // notifyListeners function.
複製程式碼

陷阱

1.為了執行這個專案，你需要在一個特定的環境下執行。

  • 開發。flutter run -t lib/main_dev.dart
  • 生產環境。flutter run -t lib/main_prod.dart

2.你需要一個個人訪問令牌來驗證GraphCMS伺服器。要獲得一個，請到graphcms.com/docs/author…。

如果你不想浪費你的時間，你可以使用我的令牌，它可以在這個repo中找到。

最後，享受你的工作，看看GraphQL是多麼的不可思議。

這是我的第一篇文章，希望它對那些剛接觸GraphQL和Flutter的人有用。?

相關文章