2019年13大GraphQL工具和庫

GraphQL是Facebook內部從2012年開始開發的項目，於2015年公開發布。2018年11月7日，GraphQL的控制權被移交給由Linux基金會託管的GraphQL基金會。隨後GraphQL日益普及，一個富有活力的生態系統也隨之迅速成長。

GraphQL本質上是“API的查詢語言，以及使用你爲數據定義的類型系統執行查詢的服務端運行時”。它不依賴任何數據庫或存儲，而是由你的代碼和數據來支持。GraphQL查詢是發送到運行時的字符串，它向客戶端返回JSON。

這種簡單有效的設計催生了一個充滿活力生態系統，社區有大批關於它的內容、演講和指南，當然還有一系列開源工具、客戶端、編輯器和庫，增強並完善實踐中的GraphQL工作流程。

本文收集了一些最出色的GraphQL工具和庫，內容涵蓋客戶端庫、IDE及好用的集成。這些工具排名不分先後，請隨意發表評論，提出建議。

1. Apollo服務器和客戶端

APOLLO平臺是GraphQL的一個實現，幫助用戶管理從雲到UI的各類數據。它可以漸進引入，可以在包括REST API和數據庫在內的現有服務上另起一層運行。

Apollo-client是Apollo GraphQL的客戶端庫。它是一個“功能齊全的緩存式GraphQL客戶端，集成了React和Angular等功能”。用戶可以用它輕鬆構建通過GraphQL獲取數據的UI組件，所以它與Bit搭配會是非常強大的組合。它的檢索數據、跟蹤加載和錯誤狀態以及更新UI的所有邏輯都使用聲明式數據提取方法封裝在一個查詢組件中，該組件可以由展示組件（presentational component）組成。這套方法在很多場景下可以大大簡化編程工作。

Apollo-server實現了一個符合規範的GraphQL服務器，可以從包括Apollo Client在內的任何GraphQL客戶端上查詢。用它可以使用來自任何來源的數據快速爲GraphQL客戶端構建符合生產需求、自注釋的API。它是開源服務器，既可以用作獨立服務器，也能當作已有Node.js HTTP服務器的附加組件，還支持“無服務器”環境以及使用GraphQL.js構建的各種GraphQL schema。

另外下面兩個項目是對Apollo很好的補充：

項目一：https://github.com/apollographql/graphql-tools
項目二：https://github.com/Akryum/vue-apollo

2. Bit

Bit是一個開源工具和平臺，可將可重用代碼轉換爲不同項目都能輕鬆共享和開發的組件。

自發布以來，Bit作爲在項目之間組織和共享組件的模塊化解決方案成績斐然。雖然Bit常被用在UI組件上，但它爲GraphQL API也提供了很多非常有用的獨特功能。

用戶可以使用Bit將API示例和客戶端（例如Apollo）轉換組件，讓團隊可以在各種項目中輕鬆共享和使用，同時可以直接從消費repo中修改組件的代碼。

這樣你的API集成就成了一條雙行線，其他人可以將API示例組件快速應用在自己的項目中，並迅速投入實際生產環境：https://bit.dev/

以下是作爲bit組件共享的GraphQL API示例：

示例一：https://hackernoon.com/make-your-graphql-api-easier-to-adopt-through-components-74b022f195c1
任何人都可以下載這些組件，根據需要修改內容，並用到他們自己的環境中。因爲消費端可以直接在他們自己的項目裏更改代碼，所以它是最易用的API集成了。
示例二：https://bit.dev/giladshoham/github-graphql
示例三：https://bit.dev/mui-org/material-ui

將React UI組件作爲bit組件集合。從自己的項目中直接查看、使用並開發各個組件。使用Bit可以非常輕鬆地將你自己的組件轉換爲這樣的共享集合。

轉換成Bit的React組件：方便在不同應用間分享、開發和同步

[Bit] Github地址：https://github.com/teambit/bit

3. Relay

import {graphql} from 'react-relay';
graphql`
query MyQuery {
viewer { 
id 
} 
} 
`;

Relay是一個由Facebook構建的JavaScript框架，用作使用GraphQL的應用的高性能、可擴展的基礎架構。

Relay是React和GraphQL之間的橋樑，利用了React的基於組件的封裝特性。組件可以通過Relay指定並獲取自己需要的數據，這樣各個組件所需的應用數據就都下到了組件本地，方便組件組合。可以查看相關博客瞭解更多信息：https://blog.bitsrc.io/apollo-and-relay-side-by-side-adb5e3844935

Relay的聲明性方法讓用戶可以使用GraphQL聲明數據需求，然後Relay負責提取數據；它會將查詢聚合到網絡請求中，這樣可以只提取你需要的數據。Relay可以使用GraphQL突變在客戶端和服務器上突變數據，同時具備自動數據一致性、優化更新和錯誤處理能力。

雖然Relay沒有Apollo這樣的競爭者受歡迎，但Facebook還是推出了relay-modern，加入了更好的變異API、QueryRenderer改進，可選路由等改進。可以在此查看詳情：https://facebook.github.io/relay/docs/en/new-in-relay-modern.html

[Relay] Github地址：https://github.com/facebook/relay

4. Prisma

Prisma是一個獲得了15000星的“數據庫工具，包括ORM、遷移和管理UI（Postgres、MySQL和MongoDB）“。簡而言之，Prisma旨在取代傳統的ORM並簡化數據庫工作流程。藉助GraphQL，Prisma可以輕鬆實現彈性、符合生產需求的GraphQL服務器，還有隨時可用的預製CRUD操作、高性能的查詢解析引擎、兼容Apollo（客戶端和服務器）、類型安全的解析器等等。

這是一個使用Prisma實現的GraphQL服務器的示例，它基於Prisma團隊開發的兩個更優秀的項目：GraphQL Yoga——功能齊全的GraphQL服務器，專注於簡單的設置、高性能和出色的開發者體驗；以及GraphQL Nexus——一個代碼優先、類型安全的GraphQL Schema構造。

相關鏈接：

[Prisma] Github地址：https://github.com/prisma/prisma

5. GraphiQL

寫這篇調查之前我就從很多朋友那裏聽說過這個項目。它已經拿了8千star，給自己的定義是“用於探索GraphQL的瀏覽器內IDE”。用戶可以通過GraphiQL從GraphQL服務器獲取Schema定義，然後就可以開始工作了。

這個IDE帶有語法高亮，字段、參數和類型前的智能類型，文檔資源管理器，實時錯誤高亮和報告，自動查詢完成以及運行和檢查查詢結果的工具。你可以使用Webpack和Brwoserify爲Web做開發，或使用預打包的版本。這裏還有一個動態演示：https://graphql.github.io/swapi-graphql/

[graphiql] Github地址：https://github.com/graphql/graphiql

6. GrahpQL編輯器

如你想象，這是一個可視化的節點編輯器，幫助用戶更容易地理解GrapHQL schema。你可以把可視節點組合在一起來創建schema，GraphQL編輯器會將它們自動轉換爲代碼。優缺點先不談，這的確是一個“無代碼解決方案”，可幫助用戶以可視化方式快速構建系統架構原型。它甚至還帶有開箱即用的後端模擬，上手就能用。

[GrahpQL編輯器] Github地址：https://github.com/slothking-online/graphql-editor

7. GraphQL Playground

這是另一款流行的GraphQL IDE，可以很好地管理訂閱、文檔和協作。它有桌面應用和Web端兩種版本，提供上下文感知、自動完成和錯誤高亮、交互式多列文檔、實時GraphQL訂閱、有多個項目和端點的配置支持，甚至支持Apollo追蹤等功能。

它使用了GraphiQL中一些的組件，又引入了交互式、多列模式文檔和自動重載、查詢歷史記錄、HTTP標頭和選項卡的配置等新功能。新學一個IDE不容易，但這款IDE能爲資深用戶節約大量時間。

[GraphQL Playground] Github地址：https://github.com/prisma/graphql-playground

8. Altair

Altair是一個“graphQL客戶端，用於對graphQL服務器進行graphQL查詢——類似Postman，但Altair是爲GraphQL服務的”。用戶可以使用Altair添加、編輯和刪除用於發出請求的HTTP標頭，包括需要授權訪問請求的身份驗證令牌頭。

它還允許你將GraphQL變量添加到請求中，以便在查詢中方便地使用動態值。它的響應狀態信息顯示可幫助用戶瞭解請求的時長，其他功能包括schema文檔顯示、語法高亮等。

[Altair] GitHub地址：https://github.com/imolorhe/altair

9. GraphQL Voyager

GraphQL Voyager可將任何GraphQL API表示爲交互式可視化圖形（包括這些公GraphQL API）。它提供了圖表的快速導航，左側面板提供了有關每種類型的更多詳細信息，“跳過Relay”選項通過刪除Relay包裝類來簡化圖形，並且可以選擇任何類型作爲圖形的根。

[GraphQL Voyager] Github地址：https://github.com/APIs-guru/graphql-voyager

10. URQL

Formidable實驗室構建的urqle是“React的高度可定製和多功能的GraphQL客戶端”。這個GraphQL客戶端暴露了一組React組件和hook，也像Apollo一樣，可以和Bit搭配出強大的組合。這個項目的宗旨是減少客戶端的空間佔用，並創建一個可以擴展的輕量庫。

它的主要理念是在簡單和複雜之間取得平衡，提供數據存儲、緩存、上下文靈活性等便利。可在此處瞭解更多信息。

用戶甚至可以自行擴展：https://github.com/FormidableLabs/urql/blob/master/docs/extending-and-experimenting.md

[URQL] Github地址：https://github.com/FormidableLabs/urql

11. AWS Amplify客戶端

AWS爲使用雲服務的應用開發提供的聲明性JavaScript庫附帶了一個GraphQL客戶端，它易於使用和配置，可用來與GraphQL服務器或AWS AppSync API交互。

這個API類別提供了向REST和GraphQL端點發出HTTP請求的解決方案。它帶有AWS簽名4.0版簽名類，會自動簽名所有AWS API請求，以及使用API密鑰、Amazon Cognito用戶池或第三方OIDC提供商的方法。AWS Amplify API模塊支持AWS AppSync或其他所有GraphQL後端。

[AWS Amplify客戶端] Github地址：https://github.com/aws-amplify/amplify-js

12. GraphQL Hooks

Graphql-hooks是爲React準備的微型hooks優先GraphQL客戶端。它支持自定義緩存插件、服務器端渲染，只需極少配置就能快速啓動和運行。它只有5.2KB（壓縮後1.9KB）大小，甚至支持服務器端渲染。

[Graphql-hooks] Github地址：https://www.nearform.com/blog/introducing-graphql-hooks/

13. Express GraphQL

最後是express-graphql。這個庫允許用戶使用Express創建GraphQL HTTP服務器（也適用於connect和Restify）。默認情況下，express請求作爲GraphQL context傳遞，這意味着你可以在掛載graphqlHTTP之前插入大多數快速中間件，以支持對用戶身份驗證、處理上載或在動態端點上掛載GraphQL等使用場景。如果你在使用Express，它應該很適合你。

[Express GraphQL] GitHub地址：https://github.com/graphql/express-graphql

https://github.com/chentsulin/koa-graphql

https://github.com/2fd/graphdoc

https://github.com/GiladShoham/github-graphql

https://github.com/andev-software/graphql-ide

https://github.com/gucheen/FetchQL

https://github.com/arackaf/micro-graphql-react

https://github.com/kadirahq/lokka

https://github.com/kennetpostigo/react-reach

https://github.com/grafoojs/grafoo

英文原文：https://blog.bitsrc.io/13-graphql-tools-and-libraries-you-should-know-in-2019-e4b9005f6fc2