今天來簡單介紹一下 GraphQL 的生態圈，我自己是使用 NodeJS 的套件 Apollo Server 來開發，而 GraphQL API 目前也有很多其他語言的 opensource 專案，如 Go、Python、Java 等等。

生態圈 Ecosystem

目前 GraphQL 相關套件的生態圈蓬勃發展， 因此衍生出許許多多的工具， 而這些工具不只特色各異、負責的區域也不盡相同。

以下讓我們來拆解一個完整的網頁服務架構如何使用到 GraphQL 相關的服務：

(原圖參考：GraphQL Toronto July 2018 - The GraphQL Ecosystem: Ecosystem Breakdown)

大致分為 GraphQL Client, GateWay, GraphQL Server, Datbase-to-GraphQL Server 四種，底下將一一介紹：

1. 客戶端 GraphQL Client

• 組織 query 並將 query 傳送去 server 的函式庫
• 支援 GraphQL 的 Declarative data fetching
• client 端只需寫好 query ，函式庫會幫你處理其餘工作如 query 解析、 FrameWork 整合、錯誤處理、 建置時間優化、快取等等

GraphQL Client 常用套件

• React 相關
  1. Apollo Client
     • ✔ 較易上手
     • ✔ 支援 Subscription
     • ✘ 在 local cache 上的設定較為繁複
  2. Relay
     • ✔ Facebook 開發給 React 、 React Native 的函式庫
     • ✔ 擁有較佳的 DX (Developer Experience)
     • ✔ 效能處理上優化幅度高
     • ✘ 最難上手 (slow learning curve) 且目前尚未支援 Subscription
  3. Urql
     • ✔ 主打輕便級、簡單
     • ✘ 比較不有名
• 其他框架的可參考 Apollo 其他平台函式庫
  包含 Vue, Angular, Meteor, Ember, Native IOS with Swift, Native Android with JAVA...

舉 Apollo-client React 為例，使用上大致如下：

(圖片來源：Slide Share: The GraphQL Ecosystem in 2018)

延伸閱讀 1：Best Practices for GraphQL Clients
延伸閱讀 2：More: Exploring Different GraphQL Clients

2. 閘道器 GraphQL Gateway

• 處於 GraphQL Client 與 GraphQL Server 之間的一個服務
• 支援路由導向、效能紀錄、資料收集等等功能

目前較為成熟的有 Apollo 提供的 Apollo Engine，
主要功能有:

• Query 執行狀況紀錄
• Query 快取 + CDN 支援
• 錯誤紀錄與追蹤
• 效能變化紀錄與分析
• 架構圖：
  
  (圖片來源: apollo-engine)
• 示意圖: (圖片來源: Tutorial: How to build a GraphQL server)

(小道消息) Apollo 畢竟還是要賺錢，所以 Apollo Engine 成為它希望養起來的一個金雞母，因此很積極地在企業界推廣，而我們家用起來的體驗也非常好！若覺得太貴的話可考慮直接跟他們聯絡或許會有意想不到的結果喔

此外類似的服務還有 FastQL 也有提供類似的功能 (強項在 caching)。

3. 後端伺服器 GraphQL BackEnd Server

• 負責接受前端來的 Query 並回應資料的函式庫
• 實際處理資料的地方
• 可實作 Schema Stitching (可將不同服務的 GraphQL Schema 整合成一個 Schema)
• 組成一個 GraphQL BackEnd Server 需
  1. GraphQL Schema Definition + Resolver Functions (開發者的資料設計)
  2. GraphQL 執行引擎 (負責實現 GraphQL 功能，本標題重點)
  3. Network Layer (路由處理，如 NodeJS 的 express)

• NodeJS
  • Apollo Server
    • 支援很多 web frameworks, 不過需要多一點設定
    • 需注意 Apollo Server 有兩個 version: v1 與 v2 ，基本上 v1 只包含執行引擎， v2 則是包進一堆套件，實施 2~3 以及其他功能
    • 更多 Apollo Server 2 功能： Apollo Server 2: What's new?
  • GraphQL Yoga
    • 基於 Apollo Server 開發，強項是都幫你設定好，有點像 GraphQL 的 create-react-app
    • 更多特色可參考: github: prisma/graphql-yoga#faq
    • 因為 Yoga 是 Prisma 公司開發的，因此若是使用 Prisma (後面會提到) 在支援度上會更佳
    • (偷偷黑)Yoga 原本跟 Apollo Server 差在它事先把一堆套件包在一起很方便，但之後的 Apollo Server 2 就已經做到這點甚至更強... Yoga 前景不明 XD (來源)
  • Express GraphQL
    • Express 的輕量級 GraphQL Server
• Ruby: GraphQL Ruby [tutorial]
• Python Django: Graphene Djaongo [tutorial]
• Go: graphql-go/graphql [tutorial]
• JAVA: graphql-java/garphal-java [tutorial]
• Scala: Sangria

因為本人工作時是使用 NodeJS ，且為了 demo 方便，實作上將會以 Apollo Server v2 為主。

4. 資料庫對 GraphQL 伺服器端 Database-to-GraphQL server

• 負責 Database 與 GraphQL 之間的溝通
• 有些會以 ORM (如 mongoose 對 mongodb) 的方式提供服務
• 將 Database 轉換成 GraphQL API
• 可以取代 GraphQL Server 直接與 Client 端溝通

• Prisma
  • GraphQL 專用的 ORM，減少後端開發的成本懶得寫後端的 code
  • 較有名且有不少知名公司使用
  • 支援很多 Database
  • 將你的 Database 變成 GraphQL API (含 CRUD)
  • Simplifies implementation of GraphQL resolvers
  • 示意圖 (from 官網)
  • 個人感覺蠻有潛力的，之前有家做 CMS 的台灣公司 Canner 就是使用這套工具
• PostGraphile
  • 專做 PostgreSQL DB
• Neo4j-GraphQL
  • 支援 Neo4j DB
  • 有 batching 功能
  • 因為 Neo4j DB 本身為 NoSQL 類型的圖形資料庫，與 GraphQL 的設計相似，因此在 Data 取得上支援度較好 (如可減少搜索次數)

其他

靜態式生成網頁

其他如 Gatsby，是一個基於 React 並支援 GraphQL 的靜態式生成網頁 (static site generator)，如果熟悉 React 或是想玩玩靜態式網頁的朋友可以試試 ~~

PS 有邦友目前的鐵人賽在介紹 Gatsby XD 可以過去看看 PWA, Severless, GraphQL 實作

互動式 IDE

GraphQL 最讚的一個工具 (沒有之一) 就是他的互動式 IDE，不但可以讓你立即 demo & 測試你的 Server，而且還有欄位提示及自動補全的功能，開發起來一路大順暢。另外還自建 Documentation ，查詢變得超方便，讓你再也不用維護 (或根本沒在寫 ?) 繁重的文件 !

比較有名的有：

• GraphiQL
  • Facebook 開發
  • 最多人使用的、最早的 IDE
  • 簡約風 ~ 讚！
• GraphQL Playground
  • 基於 GraphiQL 開發的 IDE
  • 有 Share 功能！ (像 JSBin 一樣)
  • 有效能追蹤功能 ! (詳見: Apollo Tracing)
  • 個人不是很喜歡他的 Documentation UI 設計 XD
  • 延伸閱讀：Introducing GraphQL Playground
• graphql-ide
  • 有專案管理功能

IDE 類型有 GraphQL, GraphQLPlayground。

API 測試工具

insomnia 是一款支援 REST API 及 GraphQL API 的測試工具。(類似 Postman )

感謝各位的收看 ! 前兩天都在寫比較 general 一點的東西，下一篇開始就會實際講解 GraphQL 以及程式的實作。
(我會使用 Apollo Server 來實作，所以對於不喜歡用 NodeJS 的朋友說聲抱歉，但還是有很多技術可以參考)

我的分享方向如下：

如何使用 GraphQL Query (使用 GraphQL Playground Demo)
→ 設計 GraphQL API Schema & Server Side 實作 (使用 Apollo Server)
→ Schema 設計守則
→ GraphQL Client Side 實作 (使用 Apollo Server)
→ 進階一點的 Server Side
→ Apollo Engine 教學

References:

• Slide Share: The GraphQL Ecosystem in 2018, video
• Youtube: GraphQL Tornoto July 2018 - The GrpahQL Ecosystem
• GraphQL in 2016: A Growing Ecosystem