2019年13大GraphQL工具和库

2019 年 6 月 25 日

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 很好的补充:



2. Bit


Bit 是一个开源工具和平台,可将可重用代码转换为不同项目都能轻松共享和开发的组件。


自发布以来,Bit 作为在项目之间组织和共享组件的模块化解决方案成绩斐然。虽然 Bit 常被用在 UI 组件上,但它为 GraphQL API 也提供了很多非常有用的独特功能。


用户可以使用 Bit 将 API 示例和客户端(例如 Apollo)转换组件,让团队可以在各种项目中轻松共享和使用,同时可以直接从消费 repo 中修改组件的代码。


这样你的 API 集成就成了一条双行线,其他人可以将 API​​示例组件快速应用在自己的项目中,并迅速投入实际生产环境:https://bit.dev/


以下是作为 bit 组件共享的 GraphQL API 示例:



将 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 年 6 月 25 日 18:597454

评论 1 条评论

发布
用户头像
用过不少,该说的基本都提到了
2019 年 06 月 26 日 02:07
回复
没有更多评论了
发现更多内容

数据治理第一步,摆脱“手工作坊”

KAMI

大数据 数据治理 数据开发 数据平台

为什么会是Docker?

flyer0126

Docker

[修复 Webpack 官方 Bug] 提取CSS时的依赖图修正

分一

前端 webpack 编译优化 源码刨析

从北京降雨的复盘中,我发现了企业SD-WAN网络的秘密

脑极体

源码分析 | 咋嘞?你的IDEA过期了吧!加个Jar包就破解了,为什么?

小傅哥

Java 字节码插桩 asm bytebuddy

一文了解对称加密与非对称加密

我是程序员小贱

安全

Python中的单下划线和双下划线使用场景

王坤祥

Python Python基础知识 Python基础

微博基于 Flink 的机器学习实践

Apache Flink

flink

Serverless:为我们到底带来了什么

刘宇

Serverless 云原生

Git设置分支保护实现CodeReview卡点

陈磊@Criss

契约测试:解决微服务测试的问题

陈磊@Criss

office 365激活,总是自动变成专业版2019

wood

Office Office 365

Dubbo2.7试用

心平气和

dubbo 灰度 hessian

图解23种设计模式——前方高能,前端切图仔请务必抓好方向盘

执鸢者

typescript 前端 设计模式

Flink 中的应用部署:当前状态与新应用模式

Apache Flink

flink

手把手教你从零开始使用python编写大型冒险类游戏01之游戏介绍

Geek_8dbdc1

Windows AD 保姆级配置NTP服务器教程

Young先生

时间 AD ntp Windows Server 2012 R2

为什么修改hosts不立即生效?--浏览器DNS缓存机制分析

陈磊@Criss

MySQL 架构与历史

多选参数

MySQL 数据库 MySQL优化

用故事去理解「文件 I/O」

小林coding

操作系统 异步 文件系统 同步 非阻塞网络I/O

2.3.1 理解动态代理 -《SSM深入解析与项目实战》

谙忆

2.3.2 JDK动态代理 -《SSM深入解析与项目实战》

谙忆

Django的Models更新时,不触发Signals解决办法

Young先生

django singals 信号机制 update 更新

芯片破壁者(十二.下):青瓦台魔咒与半导体“死亡谷”

脑极体

记一次腾讯云(西安)后台开发面试经历

z小赵

面试 分布式 高并发

微服务框架 - 模块功能设计篇

superman

中本聪原始比特币论文解读:点对点的电子现金系统

韩超

比特币 区块链

手撕二分查找及其变种,就是干!

我是程序员小贱

非科班学习编程一定得知道这几个网站!

我是程序员小贱

Go: Goroutine, 系统线程和CPU管理

陈思敏捷

go golang mpg

想要成功,你需要的是目标与动机,目标是你的助攻,动机是你的爱人。

叶小鍵

成功学 心理学 海蒂·格兰特·霍尔沃森

2019年13大GraphQL工具和库-InfoQ