GraphQL 中的一个常见设计错误及解决方法

GraphQL 是一种用于构建 API 的查询语言和执行引擎。它具有灵活性和开放性,但也存在一些常见的设计错误。其中之一是在 GraphQL 查询中包含太多的嵌套字段,导致查询性能下降。在本文中,我们将解释这个问题的原因,并提供一些解决方法来优化 GraphQL 查询性能。

问题描述

GraphQL 允许嵌套字段以获取与查询相关的所有数据。例如,一个博客应用程序可能需要查询帖子、作者和评论。使用 GraphQL 查询时,可以通过以下方式获取相关数据:

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

在这个查询中,我们通过 posts 查询获取所有的帖子,并使用嵌套字段authorcomments获取每个帖子的作者和评论。虽然这看起来很方便,但当数据数量增加时,查询性能会显著下降。这是因为 GraphQL 查询会生成多个 API 请求,每个请求都会返回一小部分数据,而且这些请求不能同时进行。

假设有一个拥有 10 篇帖子的博客,每篇帖子有 1000 条评论,那么我们需要发出 10010(即 10 + 10 * 1000)个 API 请求来获取所有数据。这将导致查询速度变慢,并可能导致服务器崩溃。

因此,GraphQL 查询中包含太多的嵌套字段是一个常见而严重的设计错误。

解决方法

为了解决这个问题,我们可以采用一些优化 GraphQL 查询性能的方法。本篇文章将介绍以下两种方法:

  1. 使用分页和懒加载
  2. 使用 @defer@stream 指令

方法一:使用分页和懒加载

我们可以使用分页和懒加载来减少 GraphQL 查询中包含的嵌套字段。这意味着我们只请求必需的数据,并能够根据需要加载更多数据。

对于上面的博客应用程序,我们可以更改查询以在必需时加载评论。这意味着我们只查询每篇帖子的标题和作者,并使用分页和懒加载来获取评论。

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

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

这个查询将只获取每篇帖子的标题和作者。在需要的时候,我们可以使用 getPost 查询获取每篇帖子的评论。这将允许我们只查询必需的数据,并根据需要加载更多数据。

方法二:使用 @defer@stream 指令

另一种优化 GraphQL 查询性能的方法是使用 @defer@stream 指令。这些指令允许我们在数据可用时推迟查询的执行,并逐步发送查询结果。

@defer 指令允许我们将查询推迟,直到所有其他查询已完成。通过使用 @defer,我们可以减少网络延迟并提高查询性能。例如,我们可以使用以下查询获取帖子和评论:

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

在这个查询中,我们使用 @defer 指令推迟 comments 的执行,直到所有其他查询都已完成。这将减少查询延迟和网络流量,并提高查询性能。

另一个可用的指令是 @stream,它允许我们逐步发送结果。例如,我们可以使用以下查询获取帖子和评论:

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

在这个查询中,我们使用 @stream 指令逐步发送 comments 的结果。这将允许客户端立即处理部分查询结果,并提高查询性能。

结论

GraphQL 是一个强大的工具,但在实现时需要避免一些常见的设计错误。本文解释了 GraphQL 查询中包含太多的嵌套字段是一个常见而严重的设计错误,并提供了两种解决方法,分别是使用分页和懒加载,以及使用 @defer@stream 指令。这些方法将有助于优化 GraphQL 查询性能,并提高应用程序的整体响应速度。

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


猜你喜欢

  • Vue 3.0 与 Web Components 的结合

    Vue 3.0 是目前最为流行的前端框架之一,而 Web Components 则是一种新型的 Web 开发标准,它们之间的结合可以带来诸多优势。本文将探讨 Vue 3.0 与 Web Compone...

    7 天前
  • 打造一个轻松部署的 Next.js 应用实例

    Next.js 是一个基于 React 的轻量级框架,用于构建基于服务器渲染式的应用程序。 由于其灵活性和易于使用的特点,它成为了开发人员喜爱的一个选择,同时开发人员也能够更好地掌控和管理自己的应用程...

    7 天前
  • 在 Node.js 中使用 Custom Elements 的使用场景

    在 Node.js 中使用 Custom Elements 的使用场景 Custom Elements 是 Web Components 规范中的一部分,用于创建自定义的 HTML 元素并进行组合,以...

    7 天前
  • 如何为 Docker 容器设定内存和 CPU 限制?

    Docker 是一个流行的容器化技术,它可以让我们快速部署应用程序和服务。在使用 Docker 时,限制容器的内存和 CPU 使用是非常重要的,尤其是在共享服务器资源时更是如此。

    7 天前
  • 在 Enzyme 测试中如何使用 Snapshot 来测试 React Native 组件

    React Native 是一个用于构建跨平台移动应用程序的开源框架。而 Enzyme 是一个流行的 JavaScript 测试实用程序库,它允许开发人员模拟 React 组件中的交互和行为,并对其进...

    7 天前
  • Mongoose 中使用 LeanWithId() 方法的注意事项

    在 MongoDB 的 Node.js 驱动程序 Mongoose 中,有一种强大的方法叫做 lean(),它可以在查询数据时将查询结果转换为普通 JavaScript 对象,而不是 Mongoose...

    7 天前
  • 在使用 Mocha 和 Chai 进行 JavaScript 日期和时间测试时遇到的坑

    随着前端应用的越来越复杂,对于日期和时间的处理也变得越来越常见。在进行 JavaScript 日期和时间测试时,我们通常会使用 Mocha 和 Chai 这两个开源库。

    7 天前
  • 利用 Hapi.js 构建 API 网关

    在当今互联网时代,API 已经成为了各种应用程序之间数据交互的枢纽,实现了信息的快速传递和重复使用。但是,由于各种应用程序的数量不断增加,并且多种技术和数据处理方式的使用,很难直接访问每个应用程序。

    7 天前
  • C# 程序性能优化实战

    摘要 程序性能对于任何开发人员而言都是一个至关重要的问题,特别是在高负载、高并发的场景下更为重要。本文将于介绍 C# 程序性能优化的实战方法,并提供相关示例代码。 概述 C# 是一门高效的编程语言,它...

    7 天前
  • 如何将已有的 AngularJS 应用转换为 TypeScript

    最近,TypeScript 成为了很多前端开发者的新宠。它可以给我们带来类型检查、智能代码提示等优秀的开发体验。但是,如果你的项目已经使用了 AngularJS,那么你可能会想问: “我怎么才能将我们...

    7 天前
  • 如何让 Serverless 应用具备高可用性?

    Serverless 是一种新兴的云计算架构,它能够使开发者不需要考虑后端服务器的管理和维护,从而降低了应用开发、维护和扩展的成本。但是,Serverless 应用的高可用性问题也越来越引起人们的关注...

    7 天前
  • 如何解决在 PWA 中打开的页面不能同步登录状态的问题?

    随着 PWA 技术的发展,越来越多的网站开始采用 PWA 技术来提升用户体验。然而,在使用 PWA 技术的过程中,很容易发现一个问题:在 PWA 中打开的页面不能同步登录状态,导致用户需要重复登录。

    7 天前
  • Redis 中 Bitmap 的使用及应用场景

    在 Redis 中,Bitmap 是一种非常有用的数据类型,它可以将布尔值(0 或 1)编码为二进制位,并且支持高效地对多个二进制位进行操作。本文将会详细介绍 Bitmap 的使用方法和应用场景,并且...

    7 天前
  • 使用 Next.js 开发高性能的电子商务网站

    在现代互联网时代,电子商务网站的需求日益增长。在这样的背景下,有一个快速、轻便、可扩展以及稳定的网站框架至关重要。Next.js 正是一款符合这些条件的网站框架。 本文将为您介绍使用 Next.js ...

    7 天前
  • 在 Docker 中遇到 “permission denied” 错误该如何处理?

    在 Docker 中遇到 “permission denied” 错误该如何处理? 当在 Docker 中运行前端应用程序时,可能会遇到 “permission denied” 错误,这是因为容器内的...

    7 天前
  • 解决 Flexbox 布局中的字体大小自适应问题

    前言 Flexbox 布局是一种非常流行的前端布局方式,其中最困扰开发者的问题之一就是如何解决字体大小自适应的问题。这篇文章将会向你展示一些解决这个问题的方法。 方案一:使用 vw 单位 使用 vw ...

    7 天前
  • 如何解决 Deno 在 Windows 环境下启动慢的问题

    Deno 是一个由 Ryan Dahl 创建的运行时环境,它支持 JavaScript 和 TypeScript,并集成了许多有用的工具,如测试运行器、代码格式化器和依赖引擎。

    7 天前
  • 优化 LESS 代码的几点小技巧

    LESS 是一种 CSS 预处理语言,它提供了很多强大的功能,例如变量、嵌套、混合、函数等,可以帮助我们更好地组织和管理 CSS 代码。然而,如果不注意规范和优化,LESS 代码也会变得冗长、难以维护...

    7 天前
  • Mocha 测试框架:如何组织测试套件的方式

    Mocha 测试框架:如何组织测试套件的方式 Mocha 是一个 JavaScript 测试框架,具有丰富的功能和易用性,广泛应用于前端开发。Mocha 提供了很多选项来组织测试套件,灵活性很高,但也...

    7 天前
  • 使用 CSS Reset 时需要注意的常见问题

    在前端开发中,我们通常使用 CSS Reset 来消除不同浏览器间默认样式的差异。这是一种优化页面显示的重要方法。但是,在实际应用中,使用 CSS Reset 时会存在一些常见问题,本文将针对这些问题...

    7 天前

相关推荐

    暂无文章