如何使用 GraphQL 克服 REST 的限制

REST API 是现今最流行的 API 设计风格,开发人员使用它们将数据从服务器推送到客户端。尽管 REST API 拥有许多优点,例如易于理解、简单、易于缓存和可扩展性,但也存在一些限制。比如需要多个请求才能获取所需的数据、缺乏灵活性、数据冗余等。而 GraphQL 正是为了解决这些限制而被创建。

GraphQL 是一种 API 查询语言和运行时,可以在客户端定义查询的结构,这也是其与 REST 最显著的不同。本文介绍如何使用 GraphQL 克服 REST 的限制,且会为读者提供足够的指导意义和示例代码。

GraphQL 与 REST 对比

REST 架构的限制可以通过 GraphQL 得到解决,围绕着 Data Graph 这一模型,GraphQL 使得请求方只能获取所需的数据,从而避免 REST 中的多次请求问题。GraphQL 还支持查询参数和可选参数,可以根据不同的查询情况返回不同的结果,从而提供灵活性。

REST 架构中,客户端实际上无法控制其从 API 中检索的数据。为了获得所需的数据,客户端必须执行一个 API 端点或更多,而且往往需要频繁调用。这样做的问题是,REST 风格的 API 可能会返回太多或太少需要的数据。这就需要客户端通过代码处理这些数据,使这种风格成为另一种数据过度传输的体系结构。

GraphQL 与 REST 不同,它使用单个 URL。该 URL 充当 API,客户端发出请求以获取所需数据。实际上,客户端使用查询语句来定义其对 API 的期望值。使用 GraphQL,客户端一次请求就能获取到所需的所有数据。

GraphQL 的优点

  1. 更小的网络负载

GraphQL 可以解决 REST 中的问题,即返回过多或过少的数据。查询语言支持选择所需的字段,因此服务器端只会返回所需的数据。这减少了从服务器下载的数据量,从而缩短了处理时间。

  1. 请求端点单一

使用 REST API,每个端点可能只返回有限的信息,因此客户端需要执行多个端点才能获取其需要的所有信息,从而导致多次网络请求。GraphQL API 可以提供所需的所有数据,从而消除了不必要的延迟。

  1. 灵活的查询

GraphQL 查询支持参数和可选参数,可以根据不同的查询情况返回不同的结果。这提供了更大的灵活性,客户端能够更好地控制其从 API 中得到的数据。

GraphQL 缺点

  1. 大量重复数据

当存在多个相似查询的情况时,查询可以在某些字段上重复。这可能导致大量重复的数据返回到客户端,产生额外的网络负载。

  1. 难于理解

相对于 REST API,GraphQL API 更难理解。GraphQL 可以组合不同的操作来创建复合查询,但必须具有高级知识才能正确查询数据。

GraphQL 示例代码

以下是 GraphQL 查询的示例:

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

在此示例中,查询获取文章及其作者和前三个评论。我们使用 getPost 函数和 postId 进行过滤。此查询只返回所需的数据,而不是 REST API 中返回的所有数据。

总结

GraphQL 是一种强大的 API 查询语言和运行时,适用于需要从服务器获得大量数据的应用程序。相对于 REST API,GraphQL 具有更灵活的查询功能,可以一次返回所需的数据。GraphQL 的优势在于更小的网络负载、更小的请求端点数量和更灵活的查询。因此,当应用程序需要大量数据时,请考虑使用 GraphQL。

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


猜你喜欢

  • MongoDB 中如何使用 $ne 比较运算符进行查询

    在 MongoDB 中,$ne 操作符用于进行不等于比较,即查询一个字段不等于给定值的文档。在本篇文章中,我们将探讨 MongoDB 中如何使用 $ne 比较运算符进行查询。

    1 年前
  • Custom Elements 在移动端的使用技巧

    前言 随着移动互联网的快速发展,越来越多的企业开始重视移动端的用户体验。作为前端开发人员,如何提高移动端的用户体验呢?今天我们将会介绍一个前端新技术——Custom Elements,并从移动端的角度...

    1 年前
  • 在 Next.js 中让图片支持 Webp 格式

    在 Next.js 中让图片支持 Webp 格式 Webp 是一种由 Google 开发的图片格式,采用高效的压缩算法,能够显著地减少图片的文件大小,提高页面加载速度。

    1 年前
  • Mongoose 如何进行文本搜索?

    前言 在数据库中进行文本搜索是一种非常常见的需求,因为它可以帮助我们轻松地找到相关的数据并提高数据的可用性。Mongoose 是一个非常流行的 Node.js ORM 库,它提供了一些强大的工具来处理...

    1 年前
  • 浅谈 Flexbox 布局常见的问题及解决方案

    什么是 Flexbox 布局? Flexbox 是一种新型的布局方式,它可以让我们更加容易地实现复杂的布局,同时还可以应对不同屏幕尺寸和设备的要求。Flexbox 可以让我们以一种更加自然的方式来定义...

    1 年前
  • 前端性能优化:从 localStorage 到 Web Storage API

    前言 随着互联网技术不断发展,前端开发已经成为了一个极其重要的领域。在这个领域里,一个非常重要的话题就是前端性能优化。因为良好的性能是一个网站或者应用程序成功的关键所在,与用户的使用体验直接相关。

    1 年前
  • Web Components 与原生 JavaScript 开发的比较

    前言 随着 Web 技术的不断发展,越来越多的开发者开始追求可重用、可维护、可扩展的 Web 应用程序开发工具。Web Components 技术随之产生,为开发者提供了一种组建化开发的思路,优化了 ...

    1 年前
  • 响应式设计实践:8 个特别实用的 CSS 技巧

    随着移动设备的普及,响应式设计已经成为前端开发中的一个重要概念。响应式设计可以让网页在不同屏幕尺寸的设备上有更好的表现,提供更好的用户体验。 在这篇文章中,我们将介绍 8 个特别实用的 CSS 技巧,...

    1 年前
  • 如何避免 CSS Reset 影响到 FontAwesome 字体库?

    在前端开发中,CSS Reset 是一个重要的概念,它的作用是将 HTML 元素的默认样式归零,以保证不同浏览器的页面排版效果尽量一致。但是在使用 CSS Reset 的过程中,我们可能会遇到一个问题...

    1 年前
  • TypeScript 中处理异常的最佳实践

    在前端开发中,异常处理是极其重要的一环。异常处理能帮助我们在代码执行异常的情况下可以优雅地捕捉错误并进行相应的处理,从而提高代码的可靠性。而在 TypeScript 中,异常处理也有其独特的实践方式。

    1 年前
  • Kubernetes 优化之资源请求与限制

    什么是 Kubernetes? Kubernetes 是一种开源的容器编排平台,可以用来管理和自动化容器化应用程序的部署、扩展和运行。它支持多种云服务提供商和操作系统配置,并提供了一些高级功能,如自动...

    1 年前
  • Sequelize 解决多表联查的问题

    在开发复杂的 Web 应用时,经常需要进行多表联查。使用 Sequelize 这个 Node.js 的 ORM 框架可以有效地解决这个问题。本文将通过以下子标题详细介绍 Sequelize 解决多表联...

    1 年前
  • 利用 Fastify 进行 Node.js 服务的零损耗转移

    Node.js 作为一种流行的后端开发技术,拥有强大的异步 I/O 能力和快速的响应速度,使其在 Web 开发中得到了广泛的应用。然而,对于生产环境中的 Node.js 服务来说,服务的高可用性、可靠...

    1 年前
  • 如何记录和调试 Express.js 应用程序中发生的错误?

    Express.js 是一个流行的 Node.js 框架,用于构建 Web 应用程序。不管你是刚开始学习还是在开发实际项目中,错误是难以避免的。在这篇文章中,我们会介绍如何记录和调试 Express....

    1 年前
  • 处理 GraphQL 的哈希密码及其引起的问题

    GraphQL 是一种用于构建 API 的查询语言和运行时。GraphQL 中的哈希密码是一种安全措施,用于保护用户的密码。然而,在处理哈希密码时,我们也要注意一些问题。

    1 年前
  • ES11 中的 globalThis 对象:它是什么以及如何使用?

    自从 JavaScript 诞生以来,它一直有一个问题:如何获取全局对象?在浏览器平台上,全局对象是 window,但在 Node.js 中,全局对象是 global。

    1 年前
  • # 使用 ES6 的箭头函数代替匿名函数增强可读性

    使用 ES6 的箭头函数代替匿名函数增强可读性 在前端开发中,函数是一个非常重要的概念,不仅是我们开发应用程序的基本构建块,也是我们用来组织和重用代码的主要方式。然而,由于 JavaScript 在语...

    1 年前
  • Docker 容器启动后内存占用过高的解决方法

    背景 随着互联网时代的到来,应用程序不断增加,应用程序的部署方式也随之发生了变化。传统的部署方式是在物理服务器上安装操作系统,然后在操作系统之上安装应用程序。这种方式存在很多弊端,例如:时间长、复杂度...

    1 年前
  • webpack 中的 resolve 详解:从相对路径到绝对路径

    在前端开发中,我们经常会遇到引入多个 JavaScript 文件的情况。不同的文件位置可能是相对路径,也可能是绝对路径,这样会增加维护成本,同时也会影响代码的可读性。

    1 年前
  • Jest 测试 axios 请求时如何 mock 后端接口?

    在前端开发中,我们通常会使用 axios 来与后端进行数据交互。为了保证代码的质量和可靠性,我们需要编写测试用例来测试 axios 的各种请求情况。但是如果每次请求都向真实的后端发送请求,不仅测试效率...

    1 年前

相关推荐

    暂无文章