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

時間 2019-11-17

原文原文鏈接

原文地址：A Front End Developer’s Guide to GraphQL

原文做者：PEGGY RAYZIS

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：ellcyyang

校對者：Xekin-FE, xueshuai

無論你的應用是複雜仍是簡單，你老是要從遠程服務器獲取數據。在前端，這意味着和某個端點進行 REST 鏈接、轉化並緩存服務器應答以及從新渲染 UI。多年以來，REST 是 API 的標配，可是在過去的一年內，一種名爲 GraphQL 的新 API 技術憑藉它優秀的開發體驗和敘述性數據獲取方式開始流行起來。css

在這篇文章中咱們將會經過一系列實例來講明 GraphQL 會如何幫助你解決獲取遠程數據的痛點。若是你是個 GraphQL 新手，也不用懼怕！我會列舉一些學習資源來幫助你使用 Apollo 棧學習 GraphQL，而後你就能領先別人一步掌握它。html

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 端點、數據庫或別的什麼中檢索數據的一系列函數）。react

但它實際上比聽起來要簡單 —— 經過 Apollo 啓動臺（一個 GraphQL 服務器控制檯），你能夠用不超過60行代碼在瀏覽器裏建立一個可運行的 GraphQL 服務器！ 😮 咱們參考了這個我建立的啓動臺，其中包含了文章中所提到的 Coinbase API。android

你將會使用 Apollo 客戶端鏈接你本身的 GraphQL 服務器和應用，它是一個爲你獲取、緩存和更新數據的靈活快速的客戶端。鑑於 Apollo 客戶端並無和視覺層相耦合，你能夠用 React、Angular、Vue 甚至原生 JavaScript 編寫。除了跨框架以外，Apollo 也能夠跨平臺，它支持 React Native 和 Ionic。ios

試一試！🚀

如今你已經掌握到底什麼是 GraphQL 了，動手嘗試用幾個實例把 Apollo 應用到你的前端工做中去吧。我相信你最終會承認這一點 —— 一個使用了 Apollo 的基於 GraphQL 的架構將會幫助你更快地傳送數據。git

1. 添加新的數據需求但不添加新端點

咱們都遇到過這種狀況：花費幾個小時建立了一個完美的 UI 組件，而後產品需求忽然改變了。你忽然意識到，爲了得到實現新需求所需的數據，你將不得不實現一個接收 API 請求的複雜瀑布模型 —— 或者更糟 —— 一個新的 REST 端點。而後你的工做阻塞了，你不得不要求後端爲這個組件再添加一個新端點。github

這種常見問題在 GraphQL 中再也不出現，由於你在客戶端需求的數據再也不和某個端點的資源相耦合。相反，你發向 GraphQL 服務器的請求老是連上同一個端點。你的服務器經過你發送的字典指定全部的可用資源，讓你的查詢定義你所獲得的結果的格式。讓咱們在個人啓動臺中用以前的例子說明這些概念：數據庫

在咱們的字典裏的第22～26行，咱們定義了 ExchangeRate 類型。這些字段列舉出了全部在咱們的應用中可查詢的資源。npm

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 類型系統的文檔。這對於拓展字典來講極爲有用，不會給開發者帶來任何維護成本。