摘要：開發(fā)者體驗可以幫助團(tuán)隊更快地實現(xiàn)功能上線，因為它對開發(fā)者的體驗非常好?？梢燥@示每個的埋點指標(biāo)，可以幫忙你定位錯誤，可以分析中請求的每個字段的分布頻率。產(chǎn)品案例雖然規(guī)范是由在年公布的，但是自年以來，就是移動應(yīng)用開發(fā)的重要組成部分。

在大前端應(yīng)用的開發(fā)過程中，如何管理好數(shù)據(jù)是一件很有挑戰(zhàn)的事情。后端工程師需要聚合來自多個數(shù)據(jù)源的數(shù)據(jù)，再分發(fā)到大前端的各個端中，而大前端工程師需要在實現(xiàn)用戶體驗好的視圖 (optimistic UI¹) 的基礎(chǔ)上，需要考慮如何管理端上的狀態(tài)。

在團(tuán)隊中使用 GraphQL 能夠很好的解決數(shù)據(jù)管理的痛點。本文接下來會介紹 GraphQL 聲明式(declarative)獲取數(shù)據(jù)的方法，這將簡化數(shù)據(jù)管理的難度，并且提升網(wǎng)絡(luò)性能。還會介紹 Apollo² 如何通過一系列對開發(fā)者體驗好的工具，提高工程師的開發(fā)效率。

譯注1：optimistic UI 是一種 UI 設(shè)計模式。例如，你在微信上發(fā)送消息會直接顯示，而不用等到消息的網(wǎng)絡(luò)請求成功或失敗后再顯示。optimistic UI 的數(shù)據(jù)管理很復(fù)雜，需要先顯示模擬數(shù)據(jù)，再等待網(wǎng)絡(luò)請求成功或失敗后，再顯示真正的數(shù)據(jù)。通過 Apollo 可以輕易地實現(xiàn) optimistic UI。
譯注2：Apollo 是實現(xiàn)，GraphQL 是標(biāo)準(zhǔn)，和 JS/ECMA 的關(guān)系一樣。

Apollo 可以幫助團(tuán)隊更快地實現(xiàn)功能上線，因為它對開發(fā)者的體驗非常好。Apollo 目標(biāo)是"讓各端的數(shù)據(jù)管理變得簡單"(simplify data management across the stack)。通過 Apollo Client、Apollo Server 和 Apollo Engine，以前需要花上一些功夫?qū)崿F(xiàn)的功能，比如全棧緩存、數(shù)據(jù)規(guī)范化、optimistic UI，現(xiàn)在變得很簡單。

GraphQL 強(qiáng)類型查詢語言的特性，使得開發(fā)者可以利用牛逼的工具來請求 GraphQL 接口。借助 GraphQL 內(nèi)省系統(tǒng)(introspection system)，開發(fā)者可以查詢 GraphQL schema ³信息，包括字段和類型。內(nèi)省系統(tǒng)擁有一些非常炫酷的功能，比如自動生成的文檔、代碼自動補(bǔ)全等等。

譯注3：schema 用于描述你所要數(shù)據(jù)的結(jié)構(gòu)和字段，如：

 {
   dogs {
     id
     breed
     image {
       url
     }
     activities {
       name
     }
   }
 }

GraphQL Playground
Prisma 團(tuán)隊開發(fā)的 GraphQL Playground 工具是一款非常優(yōu)秀的 IDE，它可以把自定義的 schema 和查詢歷史自動地生成文檔。只要看一下，你就知道 GraphQL API 中有哪些能獲取到的數(shù)據(jù)，而不用研究后端代碼或了解數(shù)據(jù)來源。

Apollo Server 2.0 內(nèi)置了 GraphQL Playground，更方便你瀏覽 schema 和執(zhí)行查詢命令。

Apollo DevTools
Apollo DevTools 是 Chrome 的擴(kuò)展程序，可以查詢 Apollo 的前端緩存(Cache)，記錄查詢(Queries)和變更(Mutations)。你還可以使用 Apollo DevTools 中的 GraphiQL 來方便地測試前端查詢。

如果你使用過 REST 和狀態(tài)管理庫，如 Redux，為了發(fā)一個網(wǎng)絡(luò)請求，你需要寫 action creators、reducers、mapStateToProps 并集成中間件。使用 Apollo Client，你再也不用關(guān)系這些東西。Apollo Client 解決了一切，你只需要專注于查詢，而不需要寫一堆狀態(tài)管理的代碼。

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://dog-graphql-api.glitch.me/graphql"
});

有團(tuán)隊聲稱他們切換成 Apollo Client 后，刪除了上千行狀態(tài)管理代碼和一堆復(fù)雜邏輯。這得益于 Apollo Client 不僅支持遠(yuǎn)程數(shù)據(jù)管理，還支持本地數(shù)據(jù)管理， Apollo 緩存就是當(dāng)前應(yīng)用全局狀態(tài)的單一事實來源。

Apollo platform⁴ 可以讓團(tuán)隊使用現(xiàn)代化的工具，幫忙他們快速發(fā)現(xiàn)錯誤、查看 API、開發(fā)具有挑戰(zhàn)的緩存功能。

譯注4：Apollo platform 是云平臺。Apollo 在本文中有兩層含義，首先 Apollo 是 GraphQL 的一個開源實現(xiàn)，其次 Apollo 是開發(fā) Apollo platform 、Apollo Client 、Apollo Server 等產(chǎn)品的公司。

Apollo Engine 是 GraphQL 生態(tài)系統(tǒng)中唯一可以為你的 API 提供監(jiān)控和分析的工具。Engine 可以顯示每個 resolver⁵ 的埋點指標(biāo)，可以幫忙你定位錯誤， 可以分析 schema 中請求的每個字段的分布頻率。 你還可以將這些數(shù)據(jù)傳輸?shù)侥阏谟玫钠渌治銎脚_，如 DataDog，并在某些數(shù)據(jù)超過報警闕值設(shè)置時進(jìn)行報警。

譯注5：resolver 處理返回字段的函數(shù)

使用 GraphQL 的一個主要優(yōu)點是它有聲明式數(shù)據(jù)獲取的能力，不需要前端請求多個接口，不需要手動的聚合數(shù)據(jù)，只需要你精確地描述你所要的數(shù)據(jù)，然后 GraphQL 就會將你要的數(shù)據(jù)返回給你。而使用 REST ，你需要調(diào)用每一個接口，并過濾出你要的數(shù)據(jù)，然后將過濾后的數(shù)據(jù)構(gòu)造成組件所需要的結(jié)構(gòu)。

GET /api/dogs/breeds
GET /api/dogs/images
GET /api/dogs/activities

REST 的方法不僅不好使，而且容易出錯，難以跨平臺重用邏輯。對比一下 GraphQL 聲明式的方式：

const GET_DOGS = gql`
  query {
    dogs {
      id
      breed
      image {
        url
      }
      activities {
        name
      }
    }
  }
`;

在上面，我們定義了我們想要從服務(wù)端獲取的對象的結(jié)構(gòu)。GraphQL 負(fù)責(zé)組合和過濾數(shù)據(jù)，同時返回我們想要的數(shù)據(jù)字段和結(jié)構(gòu)。

如何使用 GraphQL 查詢？Apollo Client 構(gòu)建了 GraphQL 聲明式請求數(shù)據(jù)的方法。在 React 應(yīng)用中，獲取數(shù)據(jù)、跟蹤加載和錯誤狀態(tài)以及更新 UI 的所有邏輯，都封裝在一個 Query 組件中。這種封裝方式使數(shù)據(jù)獲取組件和展示組件很容易的組合在一起。讓我們看看，如何在 React 應(yīng)用中使用 Apollo Client 獲取 GraphQL 數(shù)據(jù)：

const Feed = () => (
  {/* 數(shù)據(jù)獲取組件 Query*/} 
  
    {/* 展示組件：由 Error、Fetching、DogList 等組成的函數(shù)組件 */}
    {({ loading, error, data }) => {
      if (error) return 
      if (loading || !data) return ;
    
      return 
    }}
  
);

Apollo Client 管理整個請求的周期，從請求開始到請求結(jié)束，包括為你跟蹤加載和錯誤狀態(tài)。這里不用設(shè)置中間件，不用寫模板代碼，不用重構(gòu)的數(shù)據(jù)結(jié)構(gòu)，不用關(guān)心請求緩存。你所需要做的就是描述你組件要的數(shù)據(jù)，然后讓 Apoolo Client 去完成那些繁重的工作。

當(dāng)你使用 Apollo Client 時，你會發(fā)現(xiàn)你能刪除很多不需要的數(shù)據(jù)管理方面的代碼。具體能夠刪除多少行代碼，要根據(jù)你項目的情況來判斷，但有些團(tuán)隊聲稱他們刪除了數(shù)千行代碼。要了解更多 Apollo Client 的牛逼功能，例如 optimistic UI、重新獲取、分頁獲取，請查看我們的狀態(tài)管理指南。

在許多情況下，在現(xiàn)有的 REST 接口層之上增加 GraphQL API 層，可以提高你 App 的網(wǎng)絡(luò)性能，特別是在網(wǎng)絡(luò)差的情況下。雖然，你應(yīng)該通過網(wǎng)絡(luò)性能監(jiān)控來衡量 GraphQL 如何影響你的 App，但大家通常認(rèn)為 GraphQL 通過避免客戶端與服務(wù)端的往返通訊(round trips)，和減少請求數(shù)據(jù)的大小來提升網(wǎng)絡(luò)性能的。

因為從服務(wù)端返回的響應(yīng)中只包含你指定的查詢數(shù)據(jù)，所以 GraphQL 相對于 REST 可以顯著地減少請求數(shù)據(jù)的大小。讓我們看看前面文章中的例子：

const GET_DOGS = gql`
  query {
    dogs {
      id
      breed
      image {
        url
      }
      activities {
        name
      }
    }
  }
`;

GraphQL 服務(wù)響應(yīng)中只包括 dogs 對象的 id、breed、image、activities 字段，即便 REST 層的接口 dogs 是帶有 100 個字段的對象也是如此，所有多余的字段都將在返回給客戶端之前過濾掉。

由于每個 GraphQL 請求只返回一個響應(yīng)，使用 GraphQL 可以幫助你避免客戶端到服務(wù)端的往返通訊。使用 REST，請求一個資源就是一次往返通訊，往返通訊會快速地增加。如果你請求要列表中的每一項，每一項都需要一次往返，每一項中的每個資源也需要一次往返，總次數(shù)就是二者的乘積⁶，這就導(dǎo)致了請求時間過長。

譯注6：極端 REST 例子，列表長度 N，每一項 3 個資源，請求次數(shù)就是 3*N

GET /api/dogs/breeds
GET /api/dogs/images
GET /api/dogs/activities

使用 GraphQL，每個查詢代表一次往返通訊。如果你希望進(jìn)一步的減少往返，你可以實現(xiàn)查詢批處理(query batching)，將多個查詢封裝到單個請求中。

雖然 GraphQL 規(guī)范是由 Facebook 在 2015 年公布的，但是自 2012 年以來，GraphQL 就是 Facebook 移動應(yīng)用開發(fā)的重要組成部分。

在 Apollo 團(tuán)隊，我們發(fā)現(xiàn) GraphQL 為我們現(xiàn)有方案中遇到的很多問題提供了出色的解決方案，現(xiàn)在我們用它來優(yōu)化我們的技術(shù)基礎(chǔ)設(shè)施。幾年來，我們和開源社區(qū)、客戶、合作伙伴一起，為開源項目 Apollo 帶了了諸多創(chuàng)新。我們很驕傲，Apollo 適用于各類公司，從創(chuàng)業(yè)公司到大型企業(yè)。

除了我們自己的經(jīng)驗，我們還收到了積極地在生產(chǎn)環(huán)境中使用 Apollo GraphQL 的企業(yè)客戶的廣泛反饋、貢獻(xiàn)和支持。一些最值得借鑒的案例是：

The New York Times(https://open.nytimes.com/the-...: 學(xué)習(xí) The New York Times 如何從 Relay 切換到 Apollo，實現(xiàn)他們 App 的 SSR 和持久化 queries。

Airbnb(https://medium.com/airbnb-eng...: Airbnb 在 Apollo 平臺上下了重注，去強(qiáng)化他們微服務(wù)的數(shù)據(jù)層。

Express(https://dev-blog.apollodata.c...:使用易上手的 Apollo 分頁功能，優(yōu)化我們團(tuán)隊的關(guān)鍵應(yīng)用。

Major League Soccer(https://dev-blog.apollodata.c...: 團(tuán)隊的數(shù)據(jù)管理工具從 Redux 切換到了 Apollo，幫忙他們刪除了幾乎所有的 Redux 代碼。

Expo(https://dev-blog.apollodata.c...: 使用 Apollo 開發(fā) React Native App 使得團(tuán)隊可以專注于改善產(chǎn)品功能，而不是寫數(shù)據(jù)抓取的邏輯。

KLM(https://youtu.be/T2njjXHdKqw): 學(xué)習(xí) KLM 團(tuán)隊如何使用 GraphQL 和 Apollo 擴(kuò)展他們的 Angular app。