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