GraphQL 本質(zhì)上是“API 的查詢語言，以及使用你為數(shù)據(jù)定義的類型系統(tǒng)執(zhí)行查詢的服務(wù)端運(yùn)行時”。它不依賴任何數(shù)據(jù)庫或存儲，而是由你的代碼和數(shù)據(jù)來支持。GraphQL 查詢是發(fā)送到運(yùn)行時的字符串，它向客戶端返回 JSON。GraphQL 地址：
https://graphql.org/
這種簡單有效的設(shè)計(jì)催生了一個充滿活力生態(tài)系統(tǒng)，社區(qū)有大批關(guān)于它的內(nèi)容、演講和指南，當(dāng)然還有一系列開源工具、客戶端、編輯器和庫，增強(qiáng)并完善實(shí)踐中的 GraphQL 工作流程。
本文收集了一些最出色的 GraphQL 工具和庫，內(nèi)容涵蓋客戶端庫、IDE 及好用的集成。這些工具 排名不分先后，請隨意發(fā)表評論，提出建議。
APOLLO 平臺是 GraphQL 的一個實(shí)現(xiàn)，幫助用戶管理從云到 UI 的各類數(shù)據(jù)。它可以漸進(jìn)引入，可以在包括 REST API 和數(shù)據(jù)庫在內(nèi)的現(xiàn)有服務(wù)上另起一層運(yùn)行。
Apollo-client 是 Apollo GraphQL 的客戶端庫。它是一個“功能齊全的緩存式 GraphQL 客戶端，集成了 React 和 Angular 等功能”。用戶可以用它輕松構(gòu)建通過 GraphQL 獲取數(shù)據(jù)的 UI 組件，所以它與 Bit 搭配會是非常強(qiáng)大的組合。它的檢索數(shù)據(jù)、跟蹤加載和錯誤狀態(tài)以及更新 UI 的所有邏輯都使用聲明式數(shù)據(jù)提取方法封裝在一個查詢組件中，該組件可以由展示組件（presentational component）組成。這套方法在很多場景下可以大大簡化編程工作。
Apollo-server 實(shí)現(xiàn)了一個符合規(guī)范的 GraphQL 服務(wù)器，可以從包括 Apollo Client 在內(nèi)的任何 GraphQL 客戶端上查詢。用它可以使用來自任何來源的數(shù)據(jù)快速為 GraphQL 客戶端構(gòu)建符合生產(chǎn)需求、自注釋的 API。它是開源服務(wù)器，既可以用作獨(dú)立服務(wù)器，也能當(dāng)作已有 Node.js HTTP 服務(wù)器的附加組件，還支持“無服務(wù)器”環(huán)境以及使用 GraphQL.js 構(gòu)建的各種 GraphQL schema。
另外下面兩個項(xiàng)目是對 Apollo 很好的補(bǔ)充：
項(xiàng)目一：
https://github.com/apollographql/graphql-tools
項(xiàng)目二：
https://github.com/Akryum/vue-apollo
相關(guān)鏈接：
APOLLO 平臺：
https://medium.com/@ApolloApps
Apollo-client：
https://github.com/apollographql/apollo-client
Bit：https://bit.dev/
Apollo-server：
https://github.com/apollographql/apollo-server
GraphQL.js：
https://github.com/graphql/graphql-js
Bit 是一個開源工具和平臺，可將可重用代碼轉(zhuǎn)換為不同項(xiàng)目都能輕松共享和開發(fā)的組件。
自發(fā)布以來，Bit 作為在項(xiàng)目之間組織和共享組件的模塊化解決方案成績斐然。雖然 Bit 常被用在 UI 組件上，但它為 GraphQL API 也提供了很多非常有用的獨(dú)特功能。
用戶可以使用 Bit 將 API 示例和客戶端（例如 Apollo）轉(zhuǎn)換組件，讓團(tuán)隊(duì)可以在各種項(xiàng)目中輕松共享和使用，同時可以直接從消費(fèi) repo 中修改組件的代碼。
這樣你的 API 集成就成了一條雙行線，其他人可以將 API示例組件快速應(yīng)用在自己的項(xiàng)目中，并迅速投入實(shí)際生產(chǎn)環(huán)境：https://bit.dev/
以下是作為 bit 組件共享的 GraphQL API 示例：
示例一：
https://hackernoon.com/make-your-graphql-api-easier-to-adopt-through-components-74b022f195c1，任何人都可以下載這些組件，根據(jù)需要修改內(nèi)容，并用到他們自己的環(huán)境中。因?yàn)橄M(fèi)端可以直接在他們自己的項(xiàng)目里更改代碼，所以它是最易用的 API 集成了。
示例二：
https://bit.dev/giladshoham/github-graphql
示例三：
https://bit.dev/mui-org/material-ui
將 React UI 組件作為 bit 組件集合。從自己的項(xiàng)目中直接查看、使用并開發(fā)各個組件。使用 Bit 可以非常輕松地將你自己的組件轉(zhuǎn)換為這樣的共享集合。
轉(zhuǎn)換成 Bit 的 React 組件：方便在不同應(yīng)用間分享、開發(fā)和同步
[Bit] Github 地址：
https://github.com/teambit/bit
import {graphql} from 'react-relay';graphql`query MyQuery {viewer {id}}`;Relay 是一個由 Facebook 構(gòu)建的 JavaScript 框架，用作使用 GraphQL 的應(yīng)用的高性能、可擴(kuò)展的基礎(chǔ)架構(gòu)。
Relay 是 React 和 GraphQL 之間的橋梁，利用了 React 的基于組件的封裝特性。組件可以通過 Relay 指定并獲取自己需要的數(shù)據(jù)，這樣各個組件所需的應(yīng)用數(shù)據(jù)就都下到了組件本地，方便組件組合?？梢圆榭聪嚓P(guān)博客了解更多信息：https://blog.bitsrc.io/apollo-and-relay-side-by-side-adb5e3844935
Relay 的聲明性方法讓用戶可以使用 GraphQL 聲明數(shù)據(jù)需求，然后 Relay 負(fù)責(zé)提取數(shù)據(jù)；它會將查詢聚合到網(wǎng)絡(luò)請求中，這樣可以只提取你需要的數(shù)據(jù)。Relay 可以使用 GraphQL 突變在客戶端和服務(wù)器上突變數(shù)據(jù)，同時具備自動數(shù)據(jù)一致性、優(yōu)化更新和錯誤處理能力。
雖然 Relay 沒有 Apollo 這樣的競爭者受歡迎，但 Facebook 還是推出了 relay-modern，加入了更好的變異 API、QueryRenderer 改進(jìn)，可選路由等改進(jìn)。可以在此查看詳情：
https://facebook.github.io/relay/docs/en/new-in-relay-modern.html
[Relay] Github 地址：
https://github.com/facebook/relay
Prisma 是一個獲得了 15000 星的“數(shù)據(jù)庫工具，包括 ORM、遷移和管理 UI（Postgres、MySQL 和 MongoDB）“。簡而言之，Prisma 旨在取代傳統(tǒng)的 ORM 并簡化數(shù)據(jù)庫工作流程。借助 GraphQL，Prisma 可以輕松實(shí)現(xiàn)彈性、符合生產(chǎn)需求的 GraphQL 服務(wù)器，還有隨時可用的預(yù)制 CRUD 操作、高性能的查詢解析引擎、兼容 Apollo（客戶端和服務(wù)器）、類型安全的解析器等等。
這是一個使用 Prisma 實(shí)現(xiàn)的 GraphQL 服務(wù)器的示例，它基于 Prisma 團(tuán)隊(duì)開發(fā)的兩個更優(yōu)秀的項(xiàng)目：GraphQL Yoga——功能齊全的 GraphQL 服務(wù)器，專注于簡單的設(shè)置、高性能和出色的開發(fā)者體驗(yàn)；以及 GraphQL Nexus——一個代碼優(yōu)先 、類型安全的 GraphQL Schema 構(gòu)造。
相關(guān)鏈接：
[Prisma] Github 地址：
https://github.com/prisma/prisma
GraphQL 服務(wù)器示例：
https://github.com/prisma/prisma-examples/tree/master/typescript/graphql
GraphQL Yoga：
https://github.com/prisma/graphql-yoga
GraphQL Nexus：
https://github.com/prisma/nexus
寫這篇調(diào)查之前我就從很多朋友那里聽說過這個項(xiàng)目。它已經(jīng)拿了 8 千 星，給自己的定義是“用于探索 GraphQL 的瀏覽器內(nèi) IDE”。用戶可以通過 GraphiQL 從 GraphQL 服務(wù)器獲取 Schema 定義，然后就可以開始工作了。
這個 IDE 帶有語法高亮，字段、參數(shù)和類型前的智能類型，文檔資源管理器，實(shí)時錯誤高亮和報(bào)告，自動查詢完成以及運(yùn)行和檢查查詢結(jié)果的工具。你可以使用 Webpack 和 Brwoserify 為 Web 做開發(fā)，或使用預(yù)打包的版本。這里還有一個動態(tài)演示：
https://graphql.github.io/swapi-graphql/
[graphiql] Github 地址：
https://github.com/graphql/graphiql
如你想象，這是一個可視化的節(jié)點(diǎn)編輯器，幫助用戶更容易地理解 GrapHQL schema。你可以把可視節(jié)點(diǎn)組合在一起來創(chuàng)建 schema，GraphQL 編輯器會將它們自動轉(zhuǎn)換為代碼。優(yōu)缺點(diǎn)先不談，這的確是一個“無代碼解決方案”，可幫助用戶以可視化方式快速構(gòu)建系統(tǒng)架構(gòu)原型。它甚至還帶有開箱即用的后端模擬，上手就能用。
[GrahpQL 編輯器] Github 地址：
https://github.com/slothking-online/graphql-editor
這是另一款流行的 GraphQL IDE，可以很好地管理訂閱、文檔和協(xié)作。它有桌面應(yīng)用和 Web 端兩種版本，提供上下文感知、自動完成和錯誤高亮、交互式多列文檔、實(shí)時 GraphQL 訂閱、有多個項(xiàng)目和端點(diǎn)的配置支持，甚至支持 Apollo 追蹤等功能。
它使用了 GraphiQL 中一些的組件，又引入了交互式、多列模式文檔和自動重載、查詢歷史記錄、HTTP 標(biāo)頭和選項(xiàng)卡的配置等新功能。新學(xué)一個 IDE 不容易，但這款 IDE 能為資深用戶節(jié)約大量時間。
[GraphQL Playground] Github 地址：
https://github.com/prisma/graphql-playground
Altair 是一個“graphQL 客戶端，用于對 graphQL 服務(wù)器進(jìn)行 graphQL 查詢——類似 Postman，但 Altair 是為 GraphQL 服務(wù)的”。用戶可以使用 Altair 添加、編輯和刪除用于發(fā)出請求的 HTTP 標(biāo)頭，包括需要授權(quán)訪問請求的身份驗(yàn)證令牌頭。
它還允許你將 GraphQL 變量添加到請求中，以便在查詢中方便地使用動態(tài)值。它的響應(yīng)狀態(tài)信息顯示可幫助用戶了解請求的時長，其他功能包括 schema 文檔顯示、語法高亮等。
[Altair] GitHub 地址：
https://github.com/imolorhe/altair
GraphQL Voyager 可將任何 GraphQL API 表示為交互式可視化圖形，包括這些公共 GraphQL API：
https://github.com/APIs-guru/graphql-apis
它提供了圖表的快速導(dǎo)航，左側(cè)面板提供了有關(guān)每種類型的更多詳細(xì)信息，“跳過 Relay”選項(xiàng)通過刪除 Relay 包裝類來簡化圖形，并且可以選擇任何類型作為圖形的根。
[GraphQL Voyager] Github 地址：
https://github.com/APIs-guru/graphql-voyager
Formidable 實(shí)驗(yàn)室構(gòu)建的 urqle 是“React 的高度可定制和多功能的 GraphQL 客戶端”。這個 GraphQL 客戶端暴露了一組 React 組件和 hook，也像 Apollo 一樣，可以和 Bit 搭配出強(qiáng)大的組合。這個項(xiàng)目的宗旨是減少客戶端的空間占用，并創(chuàng)建一個可以擴(kuò)展的輕量庫。
它的主要理念是在簡單和復(fù)雜之間取得平衡，提供數(shù)據(jù)存儲、緩存、上下文靈活性等便利?？稍诖颂幜私飧嘈畔ⅲ?/p>
https://github.com/FormidableLabs/urql/blob/master/docs/architecture.md
用戶甚至可以自行擴(kuò)展：
https://github.com/FormidableLabs/urql/blob/master/docs/extending-and-experimenting.md
Formidable 實(shí)驗(yàn)室：
https://medium.com/@Formidable
[URQL] Github 地址：
https://github.com/FormidableLabs/urql
AWS 為使用云服務(wù)的應(yīng)用開發(fā)提供的聲明性 JavaScript 庫附帶了一個 GraphQL 客戶端，它易于使用和配置，可用來與 GraphQL 服務(wù)器或 AWS AppSync API 交互。
這個 API 類別提供了向 REST 和 GraphQL 端點(diǎn)發(fā)出 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
Graphql-hooks 是為 React 準(zhǔn)備的微型 hooks 優(yōu)先 GraphQL 客戶端。它支持自定義緩存插件、服務(wù)器端渲染，只需極少配置就能快速啟動和運(yùn)行。它只有 5.2KB（壓縮后 1.9KB）大小，甚至支持服務(wù)器端渲染。
服務(wù)器端渲染：
https://github.com/nearform/graphql-hooks/tree/master/packages/graphql-hooks-ssr
[Graphql-hooks] Github 地址：
https://www.nearform.com/blog/introducing-graphql-hooks/
最后是 express-graphql。這個庫允許用戶使用 Express 創(chuàng)建 GraphQL HTTP 服務(wù)器（也適用于 connect 和 Restify）。默認(rèn)情況下，express 請求作為 GraphQL context 傳遞，這意味著你可以在掛載 graphqlHTTP 之前插入大多數(shù)快速中間件，以支持對用戶身份驗(yàn)證、處理上載或在動態(tài)端點(diǎn)上掛載 GraphQL 等使用場景。如果你在使用 Express，它應(yīng)該很適合你。
[Express GraphQL] GitHub 地址：
https://github.com/graphql/express-graphql
原文鏈接：
https://blog.bitsrc.io/13-graphql-tools-and-libraries-you-should-know-in-2019-e4b9005f6fc2
