GraphQL 如何解决 API 性能问题

在传统的 RESTful 架构中,为了获取前端所需的数据,需要向后端发出多个请求,这不仅浪费了带宽,同时也给服务器带来了压力。而 GraphQL 则通过优化数据传输的方式解决了这一问题,它的主要思想就是客户端可以向服务器直接请求所需数据的具体内容和格式,减少了不必要的响应数据,提高了 API 性能。

GraphQL 是什么

Graphql 是一种由 Facebook 开发的一种用于 API 查询语言的开源技术。它通过提供一个强大的 API 查询语言来允许客户端指定需要从服务端获取的数据。它对于客户端来说,是一种单一端点(endpoint)的体验,客户端可以在单一请求中调用多种数据获取请求,最终获得所需的数据。

该查询语言有以下几个关键点:

  • 查询(Query):客户端能够指定需要从服务端获取的数据,而不是服务端强制地一次性返回所有的数据。
  • 变更(Mutation):客户端能够通过 Graphql 发送并修改服务端数据,与查询一样,它需要指定需要修改的属性和规则。
  • 订阅(Subscription):客户端可以订阅服务端的数据变化,一旦服务端数据有了变化,服务端就会发送数据给客户端。

GraphQL 的优势

相对于传统的 RESTful 架构,GraphQL 的优势有以下一些:

  1. 使 API 轻松地适应客户端需求:Graphql 可以根据客户端需要获得的数据和字段,动态生成一个查询计划。这非常方便,因为客户端可以定义自己所需的接口,不需要因特定请求创建额外的数据获取接口。

  2. 支持多种数据源(Sources of data):服务端可以从任意的数据源获取数据,例如 SQL 数据库、NoSQL 数据库、第三方 API、文本文件等等,因为 GraphQL 可以处理不同数据源的数据请求。

  3. 避免了“过度获取”(Over-fetching)和“欠获取”(Under-fetching):在传统的 RESTful 架构中,可能情况下,客户端需要从多个 API 端点获取数据。这会导致所谓的“过度获取”问题,因为客户端需要获得远多于实际需要的数据,服务端则通常会返回重复的数据。相对的,“欠获取”则是指 API 端点不能提供客户所需的所有数据,这会导致客户端需要使用不同的端点弥补这些缺失。使用 GraphQL, 客户端可以告诉后台需要的 API 端点在一个请求中,避免了这种问题。

  4. 支持分布式查询:GraphQL 支持使用分布式查询,这意味着你可以向多个外部 API 端点发送请求,在同一个查询中获取数据。

GraphQL 的示例代码

Graphql 像是一种查询语言,它跟我们熟知的 SQL 有很多相似之处。不过,它主要用于网络 API 的请求。以下是一个示例代码:

----- --------------- -
  ------------ ------ -
    ----
    -----
    ---------- -
      ----
    -
  -
-

这个查询将会返回以下结果:

-
  ------- -
    ----------- -
      ------- ----- -----
      -------- ------- ----------
      ------------- -
        ------- ----
      -
    -
  -
-

总结

GraphQL 是一种非常强大的查询语言,它可以帮助前端通过一次请求获取大量数据,降低了 API 压力。同时,GraphQL 完全在服务端控制之下,可以确保在任何情况下都始终能够提供所需的数据。想要减轻 API 压力,并提高性能,GraphQL 绝对是一个值得学习的技术。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64ae209148841e9894a1c615


猜你喜欢

  • Express.js+WebSocket 的使用示例

    在前端开发中,常常会遇到需要实现实时通信的需求。传统的 HTTP 协议无法满足这种需求,因此我们需要使用 WebSocket 协议来实现实时通信。Express.js 是一种流行的 Node.js 框...

    1 年前
  • ES10 中的实验性特性:Math.signbit()

    在 ECMAScript 2019 (通常称为 ES10)的新特性中,Math.signbit() 是一个实验性特性,它可以用于检测一个数字是否为负。 使用方法 Math.signbit() 接受一个...

    1 年前
  • Web Components 实战 — 如何使用 Shadow DOM 实现组件隔离

    Web Components 是一种构建可复用、独立组件的 Web 技术。它由四部分组成:Custom Elements、Shadow DOM、HTML Templates 和 HTML Import...

    1 年前
  • 使用 Fastify 构建 RESTful API 的最佳实践

    什么是 Fastify Fastify 是一个低开销、高性能且功能齐全的 Node.js 框架,用于构建 Web 应用程序和 RESTful API。一些被广泛使用的应用程序,例如 NodeBB 和 ...

    1 年前
  • Headless CMS 如何支持运营数据分析和报表

    前言 Headless CMS 是一种新兴的内容管理系统,其与传统 CMS 的区别在于,Headless CMS 不会直接渲染页面,而是通过 API 或者其他方式将数据提供给前端开发人员,由前端人员根...

    1 年前
  • Enzyme 伪造 React Native 组件以解决测试问题

    Enzyme 伪造 React Native 组件以解决测试问题 前言 在前端开发过程中,测试是必不可少的一环,但测试也是一个非常繁琐和耗时的工作。特别是在 React Native 开发中,由于 R...

    1 年前
  • 用 ECMAScript 2015 的模板字符串构建动态 HTML 页面

    在前端开发中,我们经常需要根据数据动态生成 HTML 页面。虽然我们可以通过字符串拼接来实现,但这种方式往往很难维护和调试。而 ECMAScript 2015 提供了模板字符串,它可以让我们更加方便地...

    1 年前
  • GraphQL query 中的错误如何更好地 debug

    在开发前端应用时,GraphQL 是一个非常强大的工具。但是当你在编写GraphQL查询时,难免会遇到错误。这些错误可能会导致您无法发送正确的请求,从而影响您的应用。

    1 年前
  • Redis 使用场景详解(四)——消息队列

    在前两篇文章中,我们已经了解了 Redis 的基本概念、数据结构、存储方式以及 Redis 在缓存、计数器、分布式锁中的使用场景。今天,我们将讨论 Redis 在消息队列中的使用。

    1 年前
  • LESS 中处理浏览器缓存问题的方法

    LESS 中处理浏览器缓存问题的方法 在前端开发中,浏览器缓存是一项非常重要的技术。通过合理地利用浏览器缓存,可以减小网络带宽的压力,提高网站性能,从而更好的提升用户体验。

    1 年前
  • 在 Koa.js 应用程序中实现图像大小调整

    图像在 WEB 页面中起着至关重要的作用,但是对于一些大图像对于网络传输的流量会造成很大的影响,因此我们常常需要对图像进行大小的调整。本文将介绍如何在 Koa.js 应用程序中实现图像大小调整的功能。

    1 年前
  • Mocha 测试框架中的异步测试该如何处理?

    在前端开发中,我们经常需要测试一些异步操作,比如 AJAX 请求、定时器等等。Mocha 是一个流行的测试框架,它支持异步测试。本文将介绍如何在 Mocha 中处理异步测试,希望能够帮助读者更好地了解...

    1 年前
  • 在 JavaScript 单元测试中使用 Chai.js 的 BDD 断言风格

    作者:AI Writer 在 Web 开发中,JavaScript 是无可替代的必备技术。而单元测试是保证代码质量的一个重要环节,目前已经成为了前端开发的一个必填项。

    1 年前
  • Mongoose 模型的创建和使用

    在 Node.js 后端开发中,使用 Mongoose 作为 MongoDB 的 ORM 工具,能够快速便捷地进行数据的增删改查操作。然而,Mongoose 中最为基础的操作便是对数据模型的创建和使用...

    1 年前
  • TypeScript 与 Node.js: 最佳开发实践

    TypeScript 是一种由微软开发的 JavaScript 超集,具有类型系统和强制类型检查等功能。在前端开发中,TypeScript 的普及程度越来越高,越来越多的前端开发者开始使用 TypeS...

    1 年前
  • ES8 中 Array.prototype.includes() 方法的用法详解及实际应用

    随着 JavaScript 的不断发展,越来越多的新语法和功能被添加到了这门语言中。而 ES8(或称 ECMAScript 2017)正是其中的一代,它为前端开发带来了很多实用的新功能。

    1 年前
  • 使用 Workbox 优化 PWA 应用的离线访问策略

    什么是 PWA? PWA 全称是 “Progressive Web Apps”,指的是一组提供了类似于原生应用体验的 Web 应用,它们可以储存在用户设备上,使用起来表现得与传统应用相似。

    1 年前
  • Jest 中 Mock 数据的使用方法详解

    在前端开发中很多时候需要进行数据的测试工作,这时候 Jest 可以很好的帮助我们完成这项任务。Jest 是一款由 Facebook 开源的 JavaScript 测试框架,拥有丰富的 API 文档和完...

    1 年前
  • React Router 在实际项目中的使用经验

    React Router 是一个流行的用于在 React Web 应用程序中进行路由的库。它为我们提供了一种使用 URL 来切换页面的方式。在实际项目中,React Router 是必不可少的工具之一...

    1 年前
  • ASP.NET Web API,如何构建 RESTful API 实例?

    ASP.NET Web API 是微软推出的一款用来构建 web api 的框架,它可以方便地实现 RESTful API,同时也提供了完善的路由、异常处理、数据绑定等功能。

    1 年前

相关推荐

    暂无文章