解决 GraphQL 中多个查询的合并问题

GraphQL 是一个分层的、递归式的查询语言,它为客户端提供了灵活的查询能力,使客户端可以构建自定义的 API 请求,并获得只包含所需数据的响应。然而,当客户端需要向多个 GraphQL 端点发出查询请求时,却会面临一个合并查询的问题。本文将介绍 GraphQL 中多个查询的合并问题,并提供一种解决方案。

多个查询的合并问题

在分布式系统中,应用程序需要使用多个 GraphQL 端点来获取数据。每个 GraphQL 端点通常只提供特定类型的数据,而客户端需要从这些不同的端点中获取多个数据集并组合它们。下面是一个简单的示例:

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

上面的查询请求了两个端点:usersposts,它们分别返回用户和帖子的信息。客户端需要将这两个数据集合并在一起,以便展示给用户。在常规 REST API 的情况下,这种情况下通常使用嵌套查询解决。

解决方案

GraphQL 提供了一种解决方案,称为 @defer 指令。@defer 允许客户端将查询分解为多个部分,然后可以在需要的时候延迟获取这些部分的响应。这让客户端有机会在获取一部分数据后根据需要获取另一部分。

在以下示例中,我们将查询拆分成两个部分:

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

在上面的查询中,我们将 usersposts 查询分开,并在 posts 上添加了 @defer 指令。当服务器收到这个查询请求时,它将发送 users 的完整响应,但是将 posts 的响应推迟,直到客户端再次请求它。下面是客户端如何请求 posts 的响应:

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

在这个请求中,客户端只请求 posts 的响应,而不是整个查询。这使得客户端能够分解查询,按需获取数据,并合并数据集。

在查询中使用 @defer 指令时,需要使用支持 @defer 的 GraphQL 客户端和服务器。当前,只有很少的 GraphQL 实现支持 @defer 延迟查询。

总结

本文介绍了 GraphQL 中多个查询的合并问题,以及使用 @defer 指令解决这个问题的方法。使用 @defer 指令,客户端可以将查询分解成多个部分,并在需要的时候延迟获取响应。这使得客户端能够按需获取数据,并将数据集合并在一起。虽然当前只有很少的 GraphQL 实现支持 @defer 指令,但是相信随着时间的推移会越来越多。

示例代码:(后端需要添加支持)

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

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

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

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

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

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

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

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

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

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


猜你喜欢

  • 使用 Docker Compose 部署基于 Flask 的 Web 应用

    前言 在进行 Web 应用开发时,一个重要的问题是如何管理依赖和配置环境。Docker 是一种流行的容器化技术,能够帮助我们解决这些问题。在这篇文章中,我们将展示如何使用 Docker Compose...

    1 年前
  • 如何利用 PWA 实现 Web 应用的音频离线播放

    引言 PWA(Progressive Web Apps) 是一项新技术,它可以将 Web 应用程序变得更像本地应用程序。PWA 不仅能够让 Web 应用程序更快地加载,还能够实现应用程序缓存和音频离线...

    1 年前
  • Mongoose 实现 findOneAndRemove 的方法及注意事项

    Mongoose 实现 findOneAndRemove 的方法及注意事项 在前端开发中,Mongoose 是一个非常流行的 MongoDB 库,它提供了方便的操作 MongoDB 数据库的 API ...

    1 年前
  • 使用 Server-sent Events(SSE)在微信小程序中实现实时数据更新的方法

    什么是 Server-sent Events? Server-sent Events(SSE)是一种基于 HTTP 协议的服务器主动向客户端推送的实时数据更新技术。

    1 年前
  • PM2 启动参数详解

    前言 在 Node.js 应用的运维过程中,使用 PM2 进行应用启动和管理已经成为一种常见的方式。PM2 是 Node.js 应用的进程管理器,可以通过命令行启动 Node.js 应用、监控应用运行...

    1 年前
  • Socket.io 搭建私聊系统实现方式解析

    随着网络的发展和普及,网页应用越来越多,前端技术也日益重要。在网页应用中,聊天系统是常见的应用场景。本文将介绍通过使用 Socket.io 搭建私聊系统的实现方式。

    1 年前
  • 解决 SASS 编译器报错的常见问题

    1. 背景 SASS 是一款常用的 CSS 预处理器,其能够提供许多便利的语言特性,使得 CSS 的编写变得更加简单和高效。但在使用 SASS 进行编译时,可能会遇到各种各样的错误和问题,本文将针对常...

    1 年前
  • Serverless 架构下调试与排错技巧分享

    前言 Serverless 架构是近年来备受关注的一种应用架构模式。相比传统的基础设施和应用部署方式,Serverless 架构的最大特点在于开发者不再需要关心底层的服务器和资源配置,只需专注于编写应...

    1 年前
  • 解决 AngularJS 应用程序中的不良 URL

    在 AngularJS 应用程序中,URL 是一个非常重要的因素。它不仅对用户友好,还可以有效地帮助搜索引擎优化。然而,有时 URL 可能会变得不好,这可能会影响应用程序的性能和可维护性。

    1 年前
  • 如何使用 LESS 编写可读性强且易于维护的 CSS?

    在前端开发中,CSS 是重要的一部分。但是,当项目越来越大,CSS 代码也越来越复杂,随之而来的就是维护难度增加。那么,该如何用更好的方式编写 CSS 呢?在这里,我们将介绍一种使用 LESS 的方法...

    1 年前
  • 解决在使用 Jest 测试时遇到的 Error: Can't resolve 'fs' 错误

    在使用 Jest 进行前端项目测试的过程中,可能会遇到 Error: Can't resolve 'fs' 错误。这个错误通常会在一些需要使用 Node.js 的内置模块(比如 fs、path 等)的...

    1 年前
  • Mocha 测试 React 组件的性能优化技巧

    React 是一个流行的前端框架,它使用虚拟 DOM 来重新渲染页面。然而,由于 React 组件的数量和复杂性的增加,性能问题也会随之增多。为了确保应用程序的性能,我们需要优化 React 组件的性...

    1 年前
  • 前端类技术文章:键盘导航实现无障碍性标准问题与WAI-ARIA的解决方案

    键盘导航是网页无障碍性中一个常常被忽略的问题。对于无法使用鼠标操作网页的用户来说,键盘导航会成为访问网页的主要方式。因此,为了使网页达到无障碍性标准,我们需要关注键盘导航的实现。

    1 年前
  • Material Design 多行文字的处理方法

    在 Web 前端开发中,文字排版一直是一个非常重要的问题之一,特别是在 Material Design 这样一个强调简洁明了的设计风格中更加需要关注。本文将介绍 Material Design 中多行...

    1 年前
  • Kubernetes 中的优雅滚动升级

    在 Kubernetes 的使用中,升级是一个常见而重要的操作。然而,升级可能会导致服务不可用或发生故障,这会对业务造成影响。为了尽量避免这种情况发生,Kubernetes 提供了优雅滚动升级的功能。

    1 年前
  • 玩转 ECMAScript 2019:全面梳理 ES10 新特性

    随着前端技术的发展,ECMAScript(以下简称 ES)也在不断更新,以满足开发者的需求,帮助开发者更加高效地编写代码。ES10 是 ES 的最新版本,它新增了一些重要的特性,这篇文章就来详细介绍。

    1 年前
  • React 中使用 React Router 构建 SPA 应用的经验分享

    React 是一种非常流行的前端框架,它具有强大的组件化和虚拟 DOM 的功能,能够让我们快速构建复杂的单页面应用程序(SPA)。而 React Router 则是一个非常流行的 React 路由库,...

    1 年前
  • 在 Next.js 应用中使用 GraphQL 查询并缓存数据的方法

    GraphQL 是一种用于 API 的查询语言,它使用类型系统定义查询语句的基础结构。与传统的 REST API 相比,GraphQL 更加灵活和可扩展,但同时也需要一些额外的配置和使用技巧。

    1 年前
  • Tailwind CSS 如何处理图片在容器中溢出的情况

    Tailwind CSS 是一个实用化优先的 CSS 框架,可以帮助前端开发者快速构建网页和应用程序。在实际开发中,很多情况下需要在容器中添加图片,但是有时候图片的尺寸可能比容器小或大,就会出现溢出的...

    1 年前
  • ES6 中的空值合并操作符

    在 JavaScript 开发中,处理空值(null 或者 undefined)是很常见的操作。在以往的开发中,我们通常使用条件语句或者三元运算符来处理空值,但是这种方式有时候会产生很多重复代码,也不...

    1 年前

相关推荐

    暂无文章