2019 年 13 大 GraphQL 工具和库

雨点打透心脏的1/2处 2023-10-09 12:05 32阅读 0赞

GraphQL 是 Facebook 内部从 2012 年开始开发的项目，于 2015 年公开发布。2018 年 11 月 7 日，GraphQL 的控制权被移交给由 Linux 基金会托管的 GraphQL 基金会。随后 GraphQL 日益普及，一个富有活力的生态系统也随之迅速成长。

GraphQL 本质上是“API 的查询语言，以及使用你为数据定义的类型系统执行查询的服务端运行时”。它不依赖任何数据库或存储，而是由你的代码和数据来支持。GraphQL 查询是发送到运行时的字符串，它向客户端返回 JSON。GraphQL 地址：

https://graphql.org/

这种简单有效的设计催生了一个充满活力生态系统，社区有大批关于它的内容、演讲和指南，当然还有一系列开源工具、客户端、编辑器和库，增强并完善实践中的 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

相关链接：

*  \[Prisma\] Github 地址：
    
    https://github.com/prisma/prisma
 *  GraphQL 服务器示例：
    
    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

5. GraphiQL

![2019年13大GraphQL工具和库-爱尖刀][2019_13_GraphQL_- 3]

写这篇调查之前我就从很多朋友那里听说过这个项目。它已经拿了 8 千 星，给自己的定义是“用于探索 GraphQL 的浏览器内 IDE”。用户可以通过 GraphiQL 从 GraphQL 服务器获取 Schema 定义，然后就可以开始工作了。

这个 IDE 带有语法高亮，字段、参数和类型前的智能类型，文档资源管理器，实时错误高亮和报告，自动查询完成以及运行和检查查询结果的工具。你可以使用 Webpack 和 Brwoserify 为 Web 做开发，或使用预打包的版本。这里还有一个动态演示：

https://graphql.github.io/swapi-graphql/

\[graphiql\] Github 地址：

https://github.com/graphql/graphiql

6. GrahpQL 编辑器

![2019年13大GraphQL工具和库-爱尖刀][2019_13_GraphQL_- 4]

如你想象，这是一个可视化的节点编辑器，帮助用户更容易地理解 GrapHQL schema。你可以把可视节点组合在一起来创建 schema，GraphQL 编辑器会将它们自动转换为代码。优缺点先不谈，这的确是一个“无代码解决方案”，可帮助用户以可视化方式快速构建系统架构原型。它甚至还带有开箱即用的后端模拟，上手就能用。

\[GrahpQL 编辑器\] Github 地址：

https://github.com/slothking-online/graphql-editor

7. GraphQL Playground

![2019年13大GraphQL工具和库-爱尖刀][2019_13_GraphQL_- 5]

这是另一款流行的 GraphQL IDE，可以很好地管理订阅、文档和协作。它有桌面应用和 Web 端两种版本，提供上下文感知、自动完成和错误高亮、交互式多列文档、实时 GraphQL 订阅、有多个项目和端点的配置支持，甚至支持 Apollo 追踪等功能。

它使用了 GraphiQL 中一些的组件，又引入了交互式、多列模式文档和自动重载、查询历史记录、HTTP 标头和选项卡的配置等新功能。新学一个 IDE 不容易，但这款 IDE 能为资深用户节约大量时间。

\[GraphQL Playground\] Github 地址：

https://github.com/prisma/graphql-playground

8. Altair

![2019年13大GraphQL工具和库-爱尖刀][2019_13_GraphQL_- 6]

Altair 是一个“graphQL 客户端，用于对 graphQL 服务器进行 graphQL 查询——类似 Postman，但 Altair 是为 GraphQL 服务的”。用户可以使用 Altair 添加、编辑和删除用于发出请求的 HTTP 标头，包括需要授权访问请求的身份验证令牌头。

它还允许你将 GraphQL 变量添加到请求中，以便在查询中方便地使用动态值。它的响应状态信息显示可帮助用户了解请求的时长，其他功能包括 schema 文档显示、语法高亮等。

\[Altair\] GitHub 地址：

https://github.com/imolorhe/altair

9. GraphQL Voyager

![2019年13大GraphQL工具和库-爱尖刀][2019_13_GraphQL_- 7]

GraphQL Voyager 可将任何 GraphQL API 表示为交互式可视化图形，包括这些公共 GraphQL API：

https://github.com/APIs-guru/graphql-apis

它提供了图表的快速导航，左侧面板提供了有关每种类型的更多详细信息，“跳过 Relay”选项通过删除 Relay 包装类来简化图形，并且可以选择任何类型作为图形的根。

\[GraphQL Voyager\] Github 地址：

https://github.com/APIs-guru/graphql-voyager

10. URQL

![2019年13大GraphQL工具和库-爱尖刀][2019_13_GraphQL_- 8]

Formidable 实验室构建的 urqle 是“React 的高度可定制和多功能的 GraphQL 客户端”。这个 GraphQL 客户端暴露了一组 React 组件和 hook，也像 Apollo 一样，可以和 Bit 搭配出强大的组合。这个项目的宗旨是减少客户端的空间占用，并创建一个可以扩展的轻量库。

它的主要理念是在简单和复杂之间取得平衡，提供数据存储、缓存、上下文灵活性等便利。可在此处了解更多信息：

https://github.com/FormidableLabs/urql/blob/master/docs/architecture.md

用户甚至可以自行扩展：

https://github.com/FormidableLabs/urql/blob/master/docs/extending-and-experimenting.md

Formidable 实验室：

https://medium.com/@Formidable

\[URQL\] Github 地址：

https://github.com/FormidableLabs/urql

11. AWS Amplify 客户端

![2019年13大GraphQL工具和库-爱尖刀][2019_13_GraphQL_- 9]

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）大小，甚至支持服务器端渲染。

服务器端渲染：

https://github.com/nearform/graphql-hooks/tree/master/packages/graphql-hooks-ssr

\[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://blog.bitsrc.io/13-graphql-tools-and-libraries-you-should-know-in-2019-e4b9005f6fc2

[2019_13_GraphQL_-]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tLzQ5ZDRkMmUyM2Y2Y2E5NjFlMWM1YTE2OWVlMDU5YTc1LmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tLzcwNzQyYzhmODI1MDJkYTI1OTliODYxNWE1ZWFlZTg5LmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tLzFiZDU1Nzc0MmRjYzc3MzExMzY3YWJmNjQ1Yzc4NzY3LmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 3]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tLzYyODhjZWYyYzYwNTkxYWE3ZGQ4MjljMzA0NDBkMzY3LmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 4]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tLzUyNjk3YzQ3NGEzYjAwMDQ2Zjc3N2ZmNDZlYzU5ZWViLmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 5]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tL2JiZjY5YmZhYmM2MTQzNmMyYWNlZjA0OTg4ZGEyNTUwLmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 6]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tLzUwY2FkZDg1MmNlZDllZWJiZjJmMmU3MzY4MWQyMjM1LmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 7]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tLzJhMzVhYjJhMGU3ZjRlOGI5MTA0ZmJlZTI4YTcwNjFmLmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 8]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tL2ZjNzU2MTAxMjQ5YzEzMzA2NmQ5ZjhlZDYzYzAyMzgwLmpwZw?x-oss-process=image/format,png
[2019_13_GraphQL_- 9]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5jaGF5dXFpbmcuY29tL2JlYjYzZTFhOTFjZTk0ZGE0MDBkMWI2YTljYzk4MWJjLmpwZw?x-oss-process=image/format,png