GraphQL是一种用于API的查询语言和运行时间。它使客户能够指定查询，并允许服务器根据强类型的模式验证数据。
与REST APIs不同，GraphQL使用一个单一的端点进行所有操作。基于GraphQL的服务器只能通过GraphQL查询进行通信。对于简单的项目，使用REST客户端，如Axios或fetch ，来发送GraphQL查询是可行的。然而，对于有高级要求的更大、更复杂的项目，需要一个GraphQL客户端。
GraphQL客户端通过抽象化小细节和实现额外的功能，使通信变得更容易，其中一些功能包括缓存、查询批处理和重复数据删除，以及GraphQL查询结果的静态类型化。
在本指南中，我们将比较以下五个GraphQL客户端，并在功能、社区支持和规模方面对每个客户端进行评估。
让我们开始吧
graphql-request
[graphql-request](https://graphql.org/code/)是一个非常简单的GraphQL客户端。该库是同构的，意味着它同时支持Node.js和浏览器。它具有一流的TypeScript支持，因此类型永远不会过时。该库的重量只有5.2kB。
活动
graphql-request GitHub仓库的活动很健康，有 370 万颗星。在npm上，graphql-request 每周被下载超过130万次，所以你在网上寻找帮助时应该不会有任何问题。
优点
graphql-request 使用起来很简单，几乎没有学习曲线。
import { GraphQLClient, gql } from 'graphql-request'
const query = gql`{
hero {
name
}
}`
const client = new GraphQLClient('<graphql-endpoint>')
const data = await client.request(query)
- 在服务器和客户端都可以使用
- 支持TypeScript
- 非常轻量级
- 强大的社区支持
缺点
- 不支持查询缓存和重复数据删除等高级功能
- 不支持GraphQL订阅
阿波罗客户端
Apollo Client是一个先进的GraphQL客户端，只用于前端。它包括缓存、查询批处理、重复数据删除和分页等功能。它还可以用来管理本地状态，以代替Redux存储。基础库的重量约为33.9kB。
Apollo Client是用TypeScript编写的，所以对TypeScript的支持非常好。它与React、Next.js、Angular和Vue.js等流行框架和库集成。Apollo客户端也有一个Chrome扩展用于检查和查询。
活动
Apollo客户端每月至少更新一次。它在npm上每周被下载超过一百万次，在GitHub上有超过16000颗星和2k个叉。
优点
- 健全和全面
- 满足大多数使用情况
- 支持TypeScript
- 集成了流行的UI库和框架
- 对iOS和Android的整合
- 用于检查查询的Chrome扩展
除了在npm和GitHub上的活动外，Apollo Client还享有专门的社区论坛形式的在线支持。它还得到了Apollo GraphQL公司的商业支持。
缺点
- 对于高级功能，如查询批处理、持久查询和缓存，学习曲线很陡。
urql
urql旨在通过内置的具有合理默认值的缓存机制来实现易用性和可扩展性。urql有Preact、React和Svelte的客户端，此外还有一个在服务器端与Node.js一起使用的核心库。
urql的软件包尺寸非常小，只有7.1kB。它是少数具有内置离线支持的GraphQL库之一。
活动
在npm上，urql库每周至少被下载95000次。在GitHub上，urql已经收到了超过6千颗星。
优点
urql很强大，但对于基本功能来说，它仍然易于使用。
const QUERY = `
query Test($id: ID!) {
getUser(id: $id) {
id
name
}
}
`;
const result = client.readQuery(QUERY, { id: 'test' });
- 清晰、可读的文档
- 支持Typescript
- 与许多流行的UI库和框架的集成
- 用于检查查询的浏览器扩展
- 内置离线支持
- 捆绑包体积小
缺点
- 不支持Angular
- 不支持查询批处理
- 没有内置的分页支持
- 与其他GraphQL客户端相比，社区很小
Relay
Relay是一个由Facebook开发的高性能和可扩展的GraphQL客户端。
正如你可能猜到的，Relay是以React为基础建立的。因此，它采取了一种基于组件的方法来获取数据。Relay是非常有主见的，严格来说是用于React前端的。Relay的文件包大小为47.1kB。
活动
Relay每周在npm上至少被下载94k次。Relay在GitHub上获得了超过15k颗星和超过1.5k个分叉。
优点
- 缓存、重复查询、分页和本地状态管理的高级功能
- 与React紧密集成，为其提供了更高阶的组件和钩子
- 受到Facebook和Quora等顶级公司的信任
缺点
- 只支持React
- 由于其僵化的惯例，非常有主见
- 与其他客户端相比，学习曲线更陡峭
- 文档难以解析
- Relay客户端只能与Relay兼容的GraphQL服务器通信。
通过执行严格的约定，Relay提供了更少的错误空间，这可能是积极的，也可能是消极的。
graphql-hooks
[graphql-hooks](https://www.nearform.com/blog/introducing-graphql-hooks/)是一个非常小的React的GraphQL客户端。尽管它的体积很小，但graphql-hooks 具有一流的缓存、分页、认证、文件上传和服务器端渲染的支持。它的捆绑包大小只有3.6kB重。
客户端提供了useQuery,useMutation, 和useSubscription React Hooks，分别用于处理查询、突变和订阅。官方文档包括从Apollo客户端迁移的指南。
活动
graphql-hooks 在npm上每月被下载6k次。它在GitHub上有1.5千颗星。
优点
- 支持TypeScript
- 支持先进的功能，如缓存、分页和SSR。
- 尺寸非常小
- API的表面积很小
缺点
- 只支持React
- 社区小
为你的项目选择合适的GraphQL客户端
下面的表格总结了上面讨论的信息。
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden; padding:10px 5px; word-break:normal; }
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-cxfx{background-color:#F0F1F3; border-color:herit; text-align:left; vertical-align:top}。
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}。
.tg .tg-0lax{text-align:left;vertical-align:top}。
| | 社区
支持 | 学习
曲线 | 尺寸 | 类型化的脚本 | 分页、 查询缓存、
批量和重复数据删除 | 同构 支持 | 与 UI库和框架的集成 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| graphql-request | 很好 | 低 | 5.2 kB | 有 | 拒绝 | 有 | 无 |
| 阿波罗客户端 | 很好 | 中型 | 33.9 kB | 有 | 有 | 仅客户端 | React, Next.js, Angular, Svelte, Ember, web components,
and Vue |
| urql | 公平 | 低 | 7.1 kB | 有 | 不支持批处理 | 有 | React, Svelte, 和Vue |
| 中继 | 允 | 高 | 47.1 kB | 没有 | 有 | 仅限客户端 | 仅限React |
| graphql-hooks | 低 | 低 | 3.6 kB | 有 | 不支持批处理和重复数据删除 | 仅限客户端 | 仅限React |
为你的项目选择最好的客户端将在很大程度上取决于你的个人目标和需求。然而，你可以使用下面列出的准则作为起点。
graphql-request：有简单要求的服务器端或前端项目- Apollo客户端：高级的前端项目
- urql：高级功能，如运行在服务器端的缓存
- Relay：项目是基于React的，需要高级功能，并包括许多组件
graphql-hooks：项目基于React，不需要高级功能。
总结
GraphQL客户端使与GraphQL API的接口比直接调用它们容易得多。
每个GraphQL客户端都有其优点和缺点。选择一个为你的用例提供最佳功能的客户端对于顺利的开发体验是最重要的。选择最佳的客户端将取决于你独特的项目，而且可能不一定有明显的答案。希望本文中的信息能够帮助你开始工作!
我希望你喜欢这篇文章!如果你喜欢我的文章并想阅读更多的内容，请在Medium上关注我。
The post5 GraphQL clients for JavaScript and Node.jsappeared first onLogRocket Blog.
