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/prisma/graphql-request

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

创作场景

2019 年 13 大 GraphQL 工具和库