前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >为什么GraphQL是API的未来[每日前端夜话0x50]

为什么GraphQL是API的未来[每日前端夜话0x50]

作者头像
疯狂的技术宅
发布于 2019-04-23 06:23:13
发布于 2019-04-23 06:23:13
1.6K01
代码可运行
举报
文章被收录于专栏:京程一灯京程一灯
运行总次数:1
代码可运行

自从 Web 开始迅猛发展,对程序员来说开发 API 是一项很艰巨的任务。我们开发 API 的方式必须随着时间的推移而发展,以便我们始终可以开发良好、直观且设计良好的API。

在过去几年中,GraphQL 在越来越受到开发者的欢迎。许多公司已经开始采用这种技术来构建他们的API。 GraphQL 是一种由 Facebook 在 2012 年开发并于 2015 年公开发布的查询语言。它已经收到了广泛的关注,并被许多大公司采用,如 Spotify,Facebook,GitHub,NYTimes,Netflix,沃尔玛等。

在本系列教程中,我们将研究 GraphQL,了解它是什么,并学习使这种查询语言如此直观和易用的原因是什么。

先让我们研究一下 REST 存在的问题,以及 GraphQL 如何解决它们。我们还将了解那些大公司为什么用 GraphQL 去构建API,以及为什么它是 API 的未来。

REST

很久以前,当我们把 API 的设计从 SOAP 转向 REST 时,认为此举将会为工作提供更多的灵活性。我们不能否认 REST 的运作是良好的,在当时是一个很好的举措。但是随着应用和 Web 变得越来越复杂,API 也会随着这些变化而发展。

不过 REST 也确实存在很多问题。让我们看看它们是什么:

太多的端点

REST 中的每个资源都由端点表示。因此,在实际的程序中,我们最终会为这些资源提供大量端点。如果要发出 GET 请求,则需要具有特定参数并特定于该请求的端点。如果要发出 POST 请求,则需要该请求的另一个端点。

REST 有太多的端点

但是这有什么问题呢?假设我们正在开发一个像 Facebook 这样的大型社交媒体应用,最终会得到很多端点,这意味着开发和维护这些 API 将花费更多的时间和精力。

过度获取和欠缺的信息

真正令人烦恼的问题是通过 REST API 会过度获取和欠缺的信息。这是因为 REST API 会始终返回固定的结构。除非我们再去创建一个特定的端点,否则无法准确获取所需的数据。

So, if we need only a tiny piece of data, we have to work with the whole object. For example, if we only need to get the firstName, lastName, and age of a user in a REST API, there's no way we can get exactly this data without fetching the whole object.

因此如果我们只需要一小部分数据,就必须处理整个对象。例如,如果我们只需要在 REST API 中获取用户的 firstNamelastNameage,就无法在不获取整个对象的情况下得到这些数据。

信息欠缺也存在问题。如果我们想从两个不同的资源获取数据,就需要分别对两个不同的端点进行调用。在一个巨大的程序中,扩展性会很差,因为在某些情况下我们只需要获取特定的数据,而不是整个对象。假设我们正在开发一个具有 100 个端点的程序。想象一下工作量和产生的代码量。随着时间的推移,开发会变得越来越困难,代码也难以维护,程序员会感到迷茫。

版本控制

在我看来,REST 中的一个痛点就是版本控制。使用 REST API,通常会看到许多带有 v1 或 v2 的 API。这些在 GraphQL 中并不需要,因为你可以通过添加或删除类型来改进 API。

在GraphQL中,你所需要做的就是写新代码。可以编写新类型、查询和修改,而无需维护其他版本的API。

因此你将看不到如下所示具有端点的 GraphQL API:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1https://example.com/api/v1/users/12312
2https://example.com/api/v2/users/12312

为什么 GraphQL 是未来

早在2012年,Facebook 在开发移动应用时面临一个问题,这导致他们开发了 GraphQL。这些问题非常普遍,特别是当我们谈论 RESTful API 设计时。如上所述,这些问题是:

  • 表现不佳
  • 端点过多
  • 过度获取或欠缺数据
  • 每当我们要增加或删除某些内容时,需要开发另一个版本
  • API 难以理解

考虑到许多概念,Facebook 的开发人员开使用了一种更好的方法来设计 API,后来将其命名为 GraphQL。基本上它是 REST 的替代品,做了很多改进。

使用 GraphQL,我们可以获得许多新功能,在构建 API 时为你提供强大的功能。下面让我们一个一个地审视它们:

单端点

根本没有必要构建很多端点!GraphQL 只需要一个端点,通过它我们可以在单个请求中获得尽可能多的数据。基本上 GraphQL 会将你的所有查询、修改和订阅封装在一个端点中,并供你调用。它改善了你的开发周期,因为你不必向两个不同的资源发出请求来获取数据。此外,当我们开发一个大型的应用时,不必再像 REST 一样获得大量端点和代码。我们只需要获得一个端点,并根据需要开发尽可能多的请求即可。

GraphQL仅需要一个端点

正如我上面所说,“单端点”方法使你的 API 能够自我描述,你不再需要再去构建文档,因为你的程序员已经知道应该如何使用。他们只需查看代码即可了解API。我们稍后会详细了解它(本系列的下一篇教程)。看起来很神奇,但这就是 GraphQL!

使用 GraphQL,你只能获取所需的数据

没有过度获取或未被充分利用的信息,你只获取自己需的数据。还记得我们最初讨论的性能问题吗?不会再像那样了,因为 GraphQL 提高了 API 的性能,特别是在网络连接速度较慢的情况下。

GraphQL 使得开发 API 变得容易并保持一致

很多人认为 GraphQL 非常复杂,因为它涉及模式和单个端点。但是你一旦开始用它开发 API,会发现它比你想象的要容易得多。当你开发网站或应用时,“单端点” API 会给你很大帮助。它使你的 API 更加能够自我描述,并且无需为它编写大量的文档。

如果你并不是把 JavaScript 作为主要语言,那也不是问题。 GraphQL 是一种查询语言,这意味着你可以使用任何自己熟悉的语言。在编写本教程时,GraphQL 支持的语言已经超过了 12 种。

GraphQL 是未来

GraphQL 是一种开源查询语言,这意味着社区可以为其做出贡献并对加以改进。当 Facebook 将其发布到社区时,得到了大量的认同。现在随着越来越多的程序员用它构建 API,GraphQL 一直在快速增长。但是也有些人一直在问它是否真的要取代 REST,或者成为构建 API 的新方法。

起初,我认为 GraphQL 是一个炒作,仅仅是创建 API 的另一种方式。但是当我开始研究它时,发现 GraphQL 具有为现代应用程序创建 API 所需的基本功能,因为它非常适合现今的技术栈。

所以如果我要对你说些什么,我会说:是的,GraphQL的确是API的未来。这就是大公司在它身上押注的原因。

在2018年11月,GraphQL 与 Linux Foundation 合作创建了一个 GraphQL Foundation。这种查询语言鼓励其开发人员创建更多的文档、工具和语言支持。这将确保 GraphQL 的稳定、中立和可持续发展的未来。因此这也是将 GraphQL 视为 API 的未来的另一个原因。

当然 GraphQL 不会立即取代 REST,因为许多应用仍然在使用它,也不可能在一夜之间重写它们。随着越来越多的公司采用 GraphQL,UX 和 DX 都将得到改进。

结论

GraphQL 的确是API的未来,我们需要了解更多信息。这就是我决定撰写这一系列教程的原因,这些教程将为我们展示如何用好 GraphQL,先从查询和修改开始,然后是订阅和身份验证

在本系列的下一篇教程中,我将深入研究 GraphQL,展示 GraphQL 如何与类型一起工作,并创建我们的第一个查询和修改。

所以请继续关注并希望在下一个教程中见到你!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端先锋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信刷屏的「给我一面国旗」如果要做到,技术原理是什么?
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
养码场
2019/09/26
7480
微信刷屏的「给我一面国旗」如果要做到,技术原理是什么?
为博客页面添加海报分享功能
以前浏览别的博主网站的时候总会在文章页末看到或多或少一些分享功能,比较常见的都是些社交平台的按钮,当时想的是功能虽好可有多少人会去用啊?心想嘛就是个摆设还不如不要占位置233
2Broear
2024/03/12
1240
前端给网页添加明水印的解决办法
创建一个水印图层,我们需要两步,一步是生成对应的图片,第二步是把图片放到最上层并全屏显示,最好还是按照格子状页面上显示多个水印内容。
伯约同学
2022/02/12
1.2K0
uniapp页面截长图,并非手机自带截图
手机截图只能获取当前页面可视区域的内容,如果我想将整个页面包括溢出屏幕的保存为图片。
英曼畅学
2023/04/18
2.3K0
浅谈两种前端截图方式:Canvas截图 vs SVG截图
如今很多网站都引入截图功能,可用于问题反馈、内容分享等实用需求,而前端截图也不知不觉成为了首选。今天为大家推荐两种前端截图方式,虽然有些局限,但是也能应付大部分项目需求。
JowayYoung
2020/04/01
13.7K2
html2canvas - 项目中遇到的那些坑点汇总
因为css里的只是展示画布显示的大小,不像这样是canvas真正的内里图画分辨率的大小。
xing.org1^
2020/06/29
4.5K0
带你领略 html2canvas
如果你希望排除某些元素被渲染,你可以添加data-html2canvas-ignore属性到这些元素,html2canvas将从渲染中排除它们。
公众号---人生代码
2020/11/19
1.8K0
带你领略 html2canvas
Vue 结合html2canvas和jsPDF实现html页面转pdf
E:\MyProjects\TMP\frontend>npm install html2canvas
授客
2020/04/30
4.9K0
Vue 结合html2canvas和jsPDF实现html页面转pdf
Web动态图片合成与分享——html2canvas方案实践
在web侧运营活动中,分享传播是重要的一环。普通的h5链接/结构化消息分享已经不能满足产品越来越大的脑洞。在很多场景下,我们需要将个性化内容(如帐号信息,头像,用户输入等)固化为一张完整的图片,一秒分享到朋友圈&AIO&群,藉此提高传播效率。
WendyGrandOrder
2018/10/19
8.3K2
Web动态图片合成与分享——html2canvas方案实践
html2canvas - 解决办法之图片跨域导致的截图空白
1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为   Access-Control-Allow-Origin:  * 2. 前端配置 1 var opts = { 2 scale: scale, // 添加的scale 参数 3 canvas: canvas, //自定义 canvas 4 logging: false, //日志开关,便于查看html2canvas的内部执行流程 5 w
xing.org1^
2018/05/17
2.7K0
jscanvas合成图片实现微信公众号海报功能
在微信公众号开发中,很多时候都有个需求是一张图加上头像和昵称或者其他数据生成自己的二维码海报或者是生成分享海报
仙士可
2019/12/19
1.4K0
HTML页面导出PDF——高清版
  需要做一个导出PDF的功能,网上找有很多,但是一般导出来的都是比较模糊的那种,下面这个是高清版的,导出的PDF都是几M,跟正常手动导出的差不多,很清晰。
_一级菜鸟
2019/09/10
2.1K0
vue中使用html2canvas及解决html2canvas截屏图片模糊问题
html2canvas  官方网站http://html2canvas.hertzen.com/index.html
lin_zone
2018/08/15
7.8K0
移动端H5页面截图
两个工具: html2canvas 官方地址:https://github.com/niklasvh/html2canvas
yangdongnan
2019/07/01
3.4K0
vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
1.将页面html转换成图片 npm install html2canvas –save
全栈程序员站长
2022/09/01
2.6K0
【前端探索】移动端H5生成截图海报的探索
移动端H5生成图片海报分享,是比较常见的交互方式。生成的海报中,往往会有用户的个性化信息,比如头像、昵称等等。
luciozhang
2023/04/22
7510
如何使用vue2 实现截图的功能?
在Vue 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图。以下是一个简单的步骤和示例代码来实现这个功能:
星辰大海c
2023/11/08
9780
如何使用vue2 实现截图的功能?
vue 开发中遇到的功能模块
参考:https://www.jianshu.com/p/0cc51943147d
用户7043603
2022/02/25
4330
高质量前端快照方案:来自页面的「自拍」
将网页保存为图片(以下简称为快照),是用户记录和分享页面信息的有效手段,在各种兴趣测试和营销推广等形式的活动页面中尤为常见。
ConardLi
2019/12/19
2.7K0
高质量前端快照方案:来自页面的「自拍」
2种方式!带你快速实现前端截图
导语 | 本文将介绍在前端开发中页面截图的两种方式,包括对其实现原理和使用方式进行详细阐述,希望能为更多前端开发者提供一些经验和帮助。 一、 背景 页面截图功能在前端开发中,特别是营销场景相关的需求中, 是比较常见的。比如截屏分享,相对于普通的链接分享,截屏分享具有更丰富的展示、更多的信息承载等优势。最近在需求开发中遇到了相关的功能,所以调研了相关的实现和原理。 二、相关技术 前端要实现页面截图的功能,现在比较常见的方式是使用开源的截图npm库,一般使用比较多的npm库有以下两个: dom-to-image
腾讯云开发者
2022/03/03
4.2K1
推荐阅读
相关推荐
微信刷屏的「给我一面国旗」如果要做到,技术原理是什么?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验