GraphQL 中常见的 N+1 问题的解决方案

在 GraphQL 中，N+1 问题是指当查询嵌套层级深时，所需要的 GraphQL 查询数量会呈现出 N+1 的规律。这种情况会导致网络负载增加，服务器压力加大，甚至会造成服务器崩溃。在这篇文章中，我们将讨论 N+1 问题的解决方案，以及如何在 GraphQL 中避免这种情况。

什么是 N+1 问题

在了解 N+1 问题之前，我们需要先了解 GraphQL 的查询语言。GraphQL 查询语言是一种声明式查询语言，其可根据需求确定所需要的字段，并在查询时只返回指定的数据。这种方式在 API 设计中很有用，因为它允许服务端在特定语境下只返回必要的数据，这使得数据获取更加高效和可预测。

然而，当查询深度变得很大时，GraphQL 查询的性能容易收到影响。举个例子，当需要查询一篇文章的作者与其所有的评论时，可能需要写出如下的查询：

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

在这个例子中，我们并没有告诉 GraphQL 如何加载该查询中使用的外键，因此 GraphQL 会按需寻找它所需的数据。当每个评论都需要作者信息时，GraphQL 会分别查询每条评论的作者信息。如果一篇文章有100条评论，那么将会生成 101 条查询，因此会呈现 N+1 的规律。

这种查询导致网络负载增加，数据库查询次数增加，请求时间变得更久，这就是 N+1 问题。

解决方案

N+1 问题通常通过在 GraphQL 服务器端生成所需的数据，减少查询的次数来解决。这个解决方案的核心思路是，通过单次查询获取所需数据，而不是通过多次查询获取数据，从而减少数据传输和查询次数。

下面列出几种解决方案：

1. 使用 Dataloader

Dataloader 是一个常用的解决 N+1 问题的工具，它通过缓存批量加载数据，以及在查询时预测并聚合所需的数据。使用 Dataloader 时，每个字段的函数都可以通过同步或异步方式返回所需数据。

在上述查询中，使用 Dataloader 可以解决 N+1 问题。我们可以使用一个 DataLoader 来加载所有的作者，并将作者的信息设置在每个评论上。这样，在加载第一个评论时，Dataloader 将加载所有的作者信息，并将其存储在缓存中。当 Dataloader 加载下一个评论时，它将使用存储在缓存中的作者信息，不会再次查询作者信息。

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

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

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

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

2. 使用批量查询

在某些情况下，使用 Dataloader 无法满足需求。例如，当需要向外部 API 发起请求时，Dataloader 将会被阻塞，因此无法处理大量的并发请求。这时可以使用批量查询，在单个 API 查询中获取大量的数据。

在这个例子中，我们可以写一个专门加载作者与评论的批量查询解决 N+1 问题。通过这个查询，服务器可以一次性返回所需的所有作者与评论信息。查询参数可以使用 GraphQL 输入对象传递，返回结果可使用 GraphQL 对象类型。

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

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

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

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

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

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

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

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

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

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

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

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

服务端具有如下实现：

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

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

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

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

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

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

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

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

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

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

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

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

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

结论

在本文中，我们介绍了 GraphQL 中的 N+1 问题，并讨论了其解决方案。Dataloader 和批量查询都可以在避免 N+1 问题中发挥重要作用。使用这些解决方案可以有效提高 GraphQL 查询的性能，并使 GraphQL 查询更具可预测性和稳定性。

在设计 Schema 时，我们应时刻思考如何尽可能地减少查询量，如何尽可能地将需要的所有数据都存放在单个查询中传递回客户端。在进行复杂的查询时，我们应该考虑将多个子查询合并成一个大的查询，并且在必要时使用 Dataloader 或批量查询来处理数据。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f39924f40ec5a964e35249

阅读全文

猜你喜欢

  • 如何使用 TypeScript 编写高质量和可维护的代码？

    前端开发的逐渐走向工程化，对代码的可维护性和可扩展性的要求也越来越高，这时候就需要 TypeScript 来为我们保驾护航。TypeScript 是一门由 Microsoft 开发和维护的开源编程语言...

    2 个月前
  • ECMAScript 2021 中的正则表达式详解

    在前端开发中，正则表达式是必不可少的技术之一。它是一种文本模式，用于匹配字符串中的模式。ECMAScript 2021 在正则表达式方面做出了一些改进，本文将详细介绍这些改进。

    2 个月前
  • 无障碍设计：如何管理动态 UI

    在现代 Web 应用程序中，动态 UI 已经成为常态。然而，如果没有妥善的管理处理，可能会导致一些无障碍用户（如盲人）无法访问您的应用程序。在这篇文章中，我们将讨论如何通过良好的设计来管理动态 UI，...

    2 个月前
  • Fastify 和 FeathersJS 比较：选择哪个更适合你？

    前端类的技术人员在构建应用程序的过程中，经常会遇到需要选择适合自己的工具和框架的问题。本篇文章将重点介绍两个常用的 Node.js 后端框架 Fastify 和 FeathersJS，并对它们的优缺点...

    2 个月前
  • Material Design 中如何实现对话框弹出效果？

    当我们需要在 Web 应用程序中显示提示、警告或错误消息时，弹出对话框是一个非常常见的解决方案。Material Design 是一种现代化的设计语言，为 Web 应用程序的设计提供了新的方法和元素。

    2 个月前
  • React Props 的使用及常见错误解析

    React 是一个非常流行的 JavaScript 框架，用于构建复杂的前端应用程序。其核心概念是组件，而组件有两种类型：函数组件和类组件。React Props 是一种传递给组件的数据，用于控制组件...

    2 个月前
  • CSS Grid 如何实现条纹网格

    CSS Grid 是一种强大的布局工具，可以帮助前端开发者轻松实现复杂的页面布局。在 CSS Grid 中，我们可以很容易地实现条纹网格效果，即将每一行的背景色与相邻行的背景色交替显示。

    2 个月前
  • 将 Babel 应用于 TypeScript 项目的详细步骤

    在前端开发中，TypeScript 是越来越受欢迎的一种静态类型语言，它可以在编译时捕获错误和警告，提高代码质量和可维护性。与此同时，Babel 是一个非常流行的 JavaScript 编译器，可以将...

    2 个月前
  • TypeScript 中的命名空间详解及使用教程

    随着前端技术的日益发展，TypeScript 作为 JavaScript 的超集和强类型语言，成为现代前端开发中的关键技术之一。命名空间是 TypeScript 中一种重要的组织代码的方式，可以有效解...

    2 个月前
  • 如何在 ECMAScript 2021 中使用 ES6 模块化

    模块化是前端开发中的一个重要概念，可以将代码分解为小模块，使得代码更加可靠和易于维护。 在 ECMAScript 2021 标准中，ES6 模块化已被正式批准，它为前端开发者提供了一种非常简单的方式来...

    2 个月前
  • 使用 Koa2 构建电商平台 API 的实践经验

    随着电商的快速发展，API (Application Programming Interface) 接口越来越受到重视。API 接口能够提供数据的稳定性和一致性，帮助前端开发者更好地开发和维护网站或应...

    2 个月前
  • Server-sent Events 的兼容性测试和兼容性解决方案

    介绍 Server-sent Events(SSE) 是一种浏览器和服务器之间实现实时通信的技术。它基于 HTTP 协议，而不需要 WebSocket 协议。 SSE 主要用于单向通信，即服务器推送消...

    2 个月前
  • 如何在 Fastify 应用中使用 Sequelize ORM

    在现代 Web 应用程序开发中，ORM（对象关系映射）已成为开发的重要工具之一。 Sequelize 是一个 Node.js ORM 工具，适用于许多主流关系型数据库，包括 PostgreSQL，My...

    2 个月前
  • Enzyme 测试 React 组件的优缺点及使用建议

    Enzyme 测试 React 组件的优缺点及使用建议 简介 Enzyme 是 React 测试库中非常受欢迎的一个库，它提供了一种简洁而强大的 API 来测试 React 组件，使用 Enzyme ...

    2 个月前
  • 一篇文章告诉你所有关于 Sass 的事

    在前端开发中，使用 CSS 是必不可少的，但当 CSS 的复杂度增加时，维护它将变得越来越困难。 这时,Sass（Syntactically Awesome Style Sheets）就出现了，并成为...

    2 个月前
  • LESS 样式优化之——去除无用样式

    在开发网站的过程中，CSS 样式表的设计是一个必不可少的环节。然而，随着网站的发展和业务规模的扩大，CSS 样式表往往会变得越来越庞杂，导致 CSS 文件大小增加、下载时间变慢等问题。

    2 个月前
  • RxJS 和 Promise 的区别与优缺点

    引言 在前端领域，异步编程是一个常见的问题。处理异步代码时，早期的解决方案通常是使用回调函数。但是回调函数的嵌套和代码的可读性和可维护性使得它不是最好的选择。随着 ES6 的推广，Promise 成为...

    2 个月前
  • 如何在 Material Design 中使用 FloatingActionButton？

    在现代的移动应用程序界面设计中，Material Design 是一种非常流行的设计风格，它是由 Google 推出的一种设计语言。其中，FloatingActionButton 是 Material...

    2 个月前
  • 如何使用 Node.js 实现图像处理

    Node.js 是一种在服务器端运行 JavaScript 的开源平台，它广泛应用于 Web 开发、后端开发、命令行工具等领域。在前端开发中，JavaScript 让图像处理变得更加便捷，通过 Nod...

    2 个月前
  • SQL Server 数据库性能优化实践

    作为前端工程师，我们经常需要与数据库打交道。但是，随着数据量的增加，我们可能会遇到一些性能问题。本文将分享一些 SQL Server 数据库性能优化的实践经验，帮助您提高数据库的性能并加速应用程序。

    2 个月前

相关推荐

    暂无文章