GraphQL 中的缓存技巧详解

面试官：小伙子，你的数组去重方式惊艳到我了

在移动应用和 Web 应用的开发中，前端状态管理和网络数据请求常常涉及到缓存问题。GraphQL 是一种出色的数据查询语言（query language），不仅能提高网络请求效率，还能减少不必要的数据传输。与此同时，GraphQL 还提供了缓存技巧来优化数据的处理和存储，缓存对应用性能优化至关重要。

本篇文章将探讨 GraphQL 中的缓存技巧，并提供详尽的解释和示例代码。

GraphQL 中的缓存概念

在 GraphQL 中，缓存是指在服务端操作返回的数据，以减少数据请求和传输。GraphQL 认为，数据缓存至服务端是一种更安全和更可控的方案。GraphQL 还引入了查询和类型等相关概念，以便更好地管理缓存技术。

GraphQL 中的缓存技术包括三个部分：

  1. 查询缓存：缓存查询结果以防止常见查询的冗余请求。
  2. 数据缓存：缓存解决数据依赖的过程，减少相应数据的查询操作。
  3. 类型缓存：缓存 GraphQL 类型或关联类型以避免未来查询中的类型错误。

查询缓存

GraphQL 中的查询缓存利用唯一的查询标识符存储查询结果。查询标识符包括查询名称和其中的参数。当查询相同时，GraphQL 会返回之前存储的查询结果，而不必重新查询。以下是利用 Apollo GraphQL 服务器实现查询缓存的示例代码：

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

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

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

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

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

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

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

在上面的示例中，查询结果 Hello, GraphQL! 被缓存，下次查询相同时，将立即返回之前缓存的结果。

数据缓存

GraphQL 中的数据缓存是基于依赖项的缓存。每当有数据发生变化时，GraphQL 会缓存数据，并在必要时刻更新缓存。以下是利用 Dataloader 实现数据缓存的示例代码：

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

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

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

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

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

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

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

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

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

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

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

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

在上面的示例中，利用 Dataloader 实现单个数据的缓存。当查询 User 的字段 user 时，在数据缓存中使用类似于 find 的方式来查询 id，如果 id 存在，并返回它。如果数据不存在，则返回 null。需要注意的是，因为 Dataloader 利用可编辑 map 将相同的 key 组合成单个批处理请求，所以查询是至少的，无需做额外的处理。

类型缓存

GraphQL 中的类型缓存是一种基于带有相同请求服务的客户端应用程序的状态进行缓存的机制。例如，如果应用程序需要一个员工类型的数据结构来查询并在应用程序中缓存这个类型，那么这就是 typeCache 所做的工作。

以下是利用 GraphQL-tools 实现类型缓存的示例代码：

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

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

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

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

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

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

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

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

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

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

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

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

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

在上面的示例中，用 EmployeeAPI 类型实现了基本的缓存。EmployeeAPI 类型中包含了一些基本的缓存方法，这些方法可以帮助应用程序更好地实现数据的存储和提取。最终缓存类型被设为一个对象，其中每个属性都是一个存在于缓存存储器中的所需类型。此示例中缓存了单独的 Employee 类型，但同时也可缓存具有相同属性的多个类型。

结论

GraphQL 中的缓存技术包括查询、数据和类型缓存。查询缓存、数据缓存和类型缓存各自具有优点和局限性，应对缓存方案的选择需要结合具体业务场景进行权衡。

在开发过程中，GraphQL 缓存技术可以大大提高服务端的性能，减少不必要的资源浪费和网络传输。掌握 GraphQL 缓存技术可以帮助前端开发者更轻松地实现性能优化的目标，同时也能够增强应用程序的可扩展性和稳定性。

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

阅读全文

猜你喜欢

  • 如何在自定义元素中使用 Axios 发送 HTTP 请求

    Axios 是一款流行的前端 HTTP 请求库，它可以帮助我们在浏览器中发送 AJAX 请求并处理响应结果。自定义元素能够让我们在 HTML 中创建自己的标记，并在 JavaScript 中实现自定义...

    9 天前
  • ES9 中的 for await...of 循环的使用方法介绍

    在 ECMAScript 9 中，推出了一个新的语法 for await...of，用于处理异步的迭代器。它可以用于遍历异步可迭代对象，操作异步生成器函数，以及同时进行多个异步操作等。

    9 天前
  • 初学者必备的 Kubernetes 基础知识总结

    前言 Kubernetes 是一种流行的容器编排、调度和管理平台，广泛应用于云原生应用和微服务架构中。本文主要介绍 Kubernetes 的基础知识，旨在帮助初学者快速入门并掌握相关的概念和操作。

    9 天前
  • 响应式设计中如何处理文本排版和行高的问题

    响应式设计中如何处理文本排版和行高的问题 随着移动设备的普及，越来越多的用户不再只是在桌面电脑上访问网站，而是在各种尺寸的设备上浏览页面。这就要求前端开发者采用响应式设计来适应不同设备的屏幕尺寸。

    9 天前
  • 解决 React.js SPA 中使用 ES6 语法时遇到的语法错误

    React.js 是一个流行的 JavaScript 库，用于创建单页应用程序（SPA）。ES6 是一个带来了许多新功能和语法的重大更新的 JavaScript 版本。

    9 天前
  • ES8 中的新特性：ShareArrayBuffer 造成的漏洞分析

    在 JavaScript 语言的不断发展中，ES8 带来了许多新特性。其中，ShareArrayBuffer 是一项引人瞩目的功能，可以实现多线程之间的数据共享。然而，正是这个新特性也引发了一个安全漏...

    9 天前
  • Webpack: 一种高效的前端资源打包和压缩工具

    随着前端开发越来越复杂，我们需要使用大量的 JavaScript、CSS、图片和其他静态资源来构建现代 web 应用程序。这些资源可能分布在不同的文件和目录中，导致对网络请求的增加和页面加载时间的延迟...

    9 天前
  • 解决 Redux 在多人协作开发中的问题

    Redux 是一种非常流行的前端状态管理库，在大型、复杂的前端应用程序中特别有用。然而，在多人协作开发中，Redux 可能会遇到一些困难和挑战。在这篇文章中，我们将讨论这些问题，并提供一些解决方案和最...

    9 天前
  • Serverless 工作流程如何简化企业 IT

    随着云计算和微服务的流行，Serverless 架构已经成为越来越多企业 IT 系统的重要组成部分。Serverless 这种无需关心管理服务器的方式，能够大大简化企业 IT 工作流程，提高效率和降低...

    9 天前
  • 如何使用 Vue.js 实现异步组件的懒加载

    使用异步组件可以帮助提高前端应用的性能，因为它们允许我们在需要使用这些组件时才加载它们，而不是在初始加载时就一次性加载所有组件。在 Vue.js 中，我们可以使用 webpack 2+ 中的 impo...

    9 天前
  • ECMAScript 2020 中的动态 import: 从基础使用到优化

    在 ECMAScript 2020 中，我们终于可以使用动态 import 这个新特性了。动态 import 让我们能够在运行时异步地加载模块，而不需要在代码中预先声明它们。

    9 天前
  • 如何使用 Koa2 进行身份验证

    在现代 web 应用程序中，对用户进行身份验证是必不可少的。Koa2 是一个经典的 Node.js web 框架，它提供了很多有用的中间件来简化我们的开发工作。在本文中，我们将介绍如何使用 Koa2 ...

    9 天前
  • 如何使用 GraphQL 构建可维护的 API

    GraphQL 是一种由 Facebook 开源的数据查询语言和运行时。它使得客户端可以请求需要的数据，并且只返回被要求的数据。这种方式可以大大减少服务器传输的数据量，节省网络带宽，提高应用程序性能及...

    9 天前
  • Kubernetes 中的容器安全策略管理

    Kubernetes 是一种流行的容器编排平台，但是在使用它的过程中，我们也需要关注容器安全问题。为了保证容器的安全，Kubernetes 提供了一系列的容器安全策略。

    9 天前
  • 使用 Server-sent Events・Event Stream 实现实时更新

    什么是 Server-sent Events Server-sent Events (SSE) 是一种允许服务器将数据推送到客户端的浏览器API。 它是一种非常简单的方法，可以让你创建实时事件处理程序...

    9 天前
  • Fastify框架的WebSocket实现详解

    前言     随着Web技术的不断发展，WebSocket已经成为许多Web应用程序中的重要组成部分。正如您所知道的，WebSocket提供了一种在服务器和客户端之间进行实时双向通信的方式。

    9 天前
  • AngularJS 的 SPA 如何实现页面跳转前的确认提示？

    在 AngularJS 的单页面应用 (SPA) 中，一个常见的需求是为用户提供一个确认提示，以保障用户数据的完整性和正确性。例如，当用户正在编辑一篇文章，突然想要返回主页面时，提供一个确认提示，让其...

    9 天前
  • CSS Flexbox 制作网格布局中的常见问题及解决方案

    概述 CSS Flexbox 是一种用于布局的 CSS 模块，它可以方便地创建弹性盒模型布局。通过使用 Flexbox，我们可以轻松地创建具有响应性的、灵活的网格布局。

    9 天前
  • 解决 Node.js 中出现 “拒绝访问” 错误的方法

    在使用 Node.js 开发时，有时候会出现 “拒绝访问” 错误，这个错误一般是指 Node 没有权限打开某些文件或目录。这个问题的解决方法其实很简单，我会在下面的内容中详细解释。

    9 天前
  • 在 ES8 中实现简单的函数装饰器

    函数装饰器是一种能够改变现存函数行为的函数，它们通常被用于装饰或修改现存函数的行为，而不用修改函数的实现。在 ES8 中，函数装饰器成为了官方的提案，并被纳入了 ECMAScript 规范。

    9 天前

相关推荐

    暂无文章