[譯] 寫給前端開發者的 GraphQL 指南

LeviDing發表於2018-04-01
前端

不管你的應用是複雜還是簡單，你總是要從遠端伺服器獲取資料。在前端，這意味著和某個端點進行 REST 連線、轉化並快取伺服器應答以及重新渲染 UI。多年以來，REST 是 API 的標配，但是在過去的一年內，一種名為 GraphQL 的新 API 技術憑藉它優秀的開發體驗和敘述性資料獲取方式開始流行起來。

在這篇文章中我們將會通過一系列例項來說明 GraphQL 會如何幫助你解決獲取遠端資料的痛點。如果你是個 GraphQL 新手，也不用害怕！我會列舉一些學習資源來幫助你使用 Apollo 棧學習 GraphQL，然後你就能領先別人一步掌握它。

GraphQL 101

在我們弄明白為什麼 GraphQL 可以讓前端工程師更輕鬆之前，我們需要先搞清楚它是什麼。當我們說起 GraphQL，我們要麼是指這種語言本身，要麼是指與它相關的一整套豐富的工具生態系統。就其核心而言，GraphQL 是 Facebook 開發的一種型別化的查詢語言，讓你能夠以一種敘述性的方式表達你對資料的需求。你的查詢結果的格式應該和你的查詢語句相匹配。在下面這個例子裡，我們期待得到一個有 currency 和 rates 屬性的物件，其中 rates 又是包含了 currency 和 rate 關鍵字的物件的陣列。

{
  rates(currency: "USD") {
    currency
    rates {
      currency
      rate
    }
  }
}
複製程式碼

當我們討論廣義上的 GraphQL 時，我們主要指的是由幫助部署 GraphQL 到應用中的一些工具所組成的生態系統。在後端，你將使用 Apollo 伺服器 來建立一個 GraphQL 伺服器 —— 一個解析 GraphQL 請求並返回資料的端點。伺服器怎麼知道應該返回哪些資料呢？你需要使用 GraphQL 工具 來建立一個字典（你的資料藍圖）和一個分解對映（用於從一個 REST 端點、資料庫或別的什麼中檢索資料的一系列函式）。

但它實際上比聽起來要簡單 —— 通過 Apollo 啟動臺（一個 GraphQL 伺服器控制檯），你可以用不超過60行程式碼在瀏覽器裡建立一個可執行的 GraphQL 伺服器！ ? 我們參考了這個 我建立的啟動臺 ，其中包含了文章中所提到的 Coinbase API。

你將會使用 Apollo 客戶端 連線你自己的 GraphQL 伺服器和應用，它是一個為你獲取、快取和更新資料的靈活快速的客戶端。鑑於 Apollo 客戶端並沒有和視覺層相耦合，你可以用 React、Angular、Vue 甚至原生 JavaScript 編寫。除了跨框架之外，Apollo 也可以跨平臺，它支援 React Native 和 Ionic。

試一試！?

現在你已經掌握到底什麼是 GraphQL 了，動手嘗試用幾個例項把 Apollo 應用到你的前端工作中去吧。我相信你最終會認可這一點 —— 一個使用了 Apollo 的基於 GraphQL 的架構將會幫助你更快地傳送資料。

1. 新增新的資料需求但不新增新端點

我們都遇到過這種情況：花費幾個小時建立了一個完美的 UI 元件，然後產品需求突然改變了。你突然意識到，為了獲得實現新需求所需的資料，你將不得不實現一個接收 API 請求的複雜瀑布模型 —— 或者更糟 —— 一個新的 REST 端點。然後你的工作阻塞了，你不得不要求後端為這個元件再新增一個新端點。

這種常見問題在 GraphQL 中不再出現，因為你在客戶端需求的資料不再和某個端點的資源相耦合。相反，你發向 GraphQL 伺服器的請求總是連上同一個端點。你的伺服器通過你傳送的字典指定所有的可用資源，讓你的查詢定義你所得到的結果的格式。讓我們在 我的啟動臺 中用之前的例子說明這些概念：

在我們的字典裡的第22～26行，我們定義了 ExchangeRate 型別。這些欄位列舉出了所有在我們的應用中可查詢的資源。

type ExchangeRate {
  currency: String
  rate: String
  name: String
}
複製程式碼

在 REST 中，我們受限於資料來源所能提供的資料。如果你的 /exchange-rates 端點不包含 name，你必須連線一個新的端點比如 /currency 來得到資料或者在資料不存在的情況下建立它。

有了 GraphQL，我們可以檢查字典，從而瞭解到 name 欄位是可查詢的。嘗試在啟動臺右側皮膚中新增name欄位，然後執行。

{
  rates(currency: "USD") {
    currency
    rates {
      currency
      rate
      name
    }
  }
}
複製程式碼

現在，把 name 欄位刪掉再重新執行查詢。看到了你的查詢結果的格式變化了嗎？

當你改變了你的查詢的敘述方式，資料也隨之改變。

你的 GraphQL 伺服器總是忠實地返回你所要求的資料，不會多給。這和 REST 有很大不同 —— 在 REST 裡你必須把資料過濾和轉化成你的 UI 元件所需要的樣子。這不僅僅節約了時間，而且還減少了載入和解析資料所需的網路負荷和 CPU 儲存空間。

2. 壓縮你的狀態管理模版

一般來說，獲取資料包含了更新你的應用的狀態。你通常需要編寫程式碼來追蹤至少三個行為：資料何時被載入、資料是否成功抵達、資料是否發生錯誤。一旦資料抵達，你必須把它轉化為你的 UI 元件所期望的樣子，對它進行標準化，快取它，然後更新頁面。 這個過程是重複性的，需要無數行模版程式碼來處理一個請求。

讓我們來看看在這個例子中 一個 React 應用例子沙盒 Apollo 客戶端是如何消滅這個無趣的過程的。 檢視 list.js 並把滾動條拖到底部。

export default graphql(ExchangeRateQuery, {
  props: ({ data }) => {
    if (data.loading) {
      return { loading: data.loading };
    }
    if (data.error) {
      return { error: data.error };
    }
    return {
      loading: false,
      rates: data.rates.rates
    };
  }
})(ExchangeRateList);
複製程式碼

在這個例子裡，React Apollo，Apollo 客戶端的 React 整合，把我們的匯率查詢關聯到 ExchangeRateList 元件。一旦 Apollo 客戶端處理了那個查詢， 它自動追蹤載入和錯誤狀態並把它放入 data prop 中去。當 Apollo 客戶端收到結果，它會根據查詢結果更新 data prop，然後按照在渲染中需要用到的匯率更新 UI。

Apollo 客戶端在底層為你完成了資料格式化和快取工作。 嘗試在右側皮膚單擊不同種類的貨幣看資料重新整理。現在，再一次選擇某個貨幣，看到資料如何立刻出現了嗎？這是 Apollo 快取在工作。不需要額外設定你就能免費從 Apollo 客戶端獲得這些。 ? 開啟 index.js 來看我們初始化 Apollo 客戶端的程式碼。

3. 使用 Apollo DevTools 和 GraphiQL 快速進行除錯

看起來 Apollo 客戶端已經為你做了很多工作！我們該如何偷看一下它的內部來了解它是如何執行的呢？有了儲存檢查和查詢與轉變過程的完全可見化，Apollo DevTools 不但能回答這些疑問，還能讓除錯過程不再枯燥甚至變得有趣！ ? 這在一個為 Chrome 和 Firefox 提供的外掛中可用，很快它也將對 React Native 提供服務。

如果你想要試用一下，按照之前的例子，在你喜歡的瀏覽器上 安裝 Apollo DevTools 然後導航到 our CodeSandbox。你需要在頂部導航欄點選“下載”，解壓檔案，執行 npm install 然後 npm start 來在本地執行這個例子。一旦你開啟了瀏覽器的開發工具皮膚，你應該看到一個叫 Apollo 的標籤頁。

首先，我們來檢查下儲存檢查器。這個標籤頁反映了 Apollo Client 快取中的狀態，讓你更容易確定你的資料是不是正確地被儲存在客戶端了。

儲存檢查器

Apollo DevTools 讓你也可以在 GraphiQL 中測試你的查詢和變更，它是一個互動式的查詢編輯器和文件瀏覽器。事實上，我們在第一個例子中嘗試新增欄位時已經使用了 GraphiQL。為了方便回顧，當你在將查詢輸入編輯器時，GraphiQL 將會自動補全，並且自動生成基於 GraphQL 型別系統的文件。這對於擴充字典來說極為有用，不會給開發者帶來任何維護成本。

Apollo Devtools

嘗試在 我的啟動臺 中右側皮膚的 GraphiQL 中執行查詢！滑鼠停在查詢編輯器的欄位上，並單擊提示框來開啟文件瀏覽器。如果你的查詢能在 GraphiQL 裡成功執行，那你就可以100%肯定這條查詢也可以在你的應用中成功執行。

升級你的 GraphQL 技能

好樣的，你已經看到這兒了！ ? 希望你喜歡這些例子，並且開始瞭解應該如何在前端使用 GraphQL 了。

想要了解更多？ ? 把 “繼續學習 GraphQL” 列入你的2018新年計劃吧！因為我希望它在新的一年裡能夠更加流行。下面是教你如何活用新學到的概念的應用例項：

繼續使用 GraphQL 吧（記得關注我們的 Twitter @apollographql）！ ?

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章