GraphQL 缓存实践指南

GraphQL 是一个强大的查询语言和运行时,它允许前端应用程序按需获取数据,并允许后端向前端提供更好的 API。然而,由于 GraphQL 与传统的 RESTful API 不同,因此其缓存策略也有所不同。

本篇文章将深入探讨 GraphQL 缓存的实践指南,并提供一些示例代码,帮助您更好地理解和应用 GraphQL 缓存技术。

为什么需要 GraphQL 缓存?

传统的 RESTful API 通常返回固定的 JSON 响应,因此可以使用 HTTP 缓存来提高性能。但是,GraphQL 查询通常返回动态结果,这使得使用传统的缓存策略更加困难。

虽然 GraphQL 查询结果通常是动态的,但是在某些情况下,我们可以预测查询结果,例如当我们使用相同的参数重复查询时,我们可以预测相同的结果将被返回。这意味着我们可以使用缓存技术来存储这些查询结果,提高性能并减轻后端服务器的压力。

使用 GraphQL 缓存的另一个好处是可以降低网络带宽的消耗,避免不必要的数据传输。

下面是一些 GraphQL 缓存的实践指南:

1. 使用 Apollo Client

Apollo Client 是一个流行的 GraphQL 客户端库,它提供了强大的缓存机制。使用 Apollo Client 可以简化缓存的实现,减少我们的工作量。

2. 使用 normalized cache

Apollo Client 的缓存采用 normalized cache,这意味着数据被缓存在一个类似于数据库表的对象中,每个查询结果都被规范化并存储在单独的对象中。这个对象可以被其他查询所引用,从而减少重复查询。

3. 使用 TTL 设定缓存过期时间

为了避免缓存占用过多内存,以及保证数据的可靠性,缓存需要设置过期时间。可以使用带有过期时间(TTL)的缓存策略,让缓存中存储的数据在一段时间后自动失效。在 Apollo Client 中可以通过设置 maxAge 参数来实现。

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

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

4. 使用 keyArgs 优化缓存

keyArgs 参数可以用于指定哪些参数应该用于唯一标识查询结果。例如,在一个博客应用程序中,我们可能会使用文章 ID 和分页参数来作为查询唯一标识符。设置了 keyArgs 参数后,如果两个查询使用相同的参数,则它们将共享相同的缓存结果。

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

5. 使用 persisted queries

如果您的应用程序具有大量的 GraphQL 查询,则可能需要使用 persisted queries。persisted queries 将查询文本从客户端移动到服务器,从而减少带宽消耗和查询时的计算负载,并确保在应用程序升级时不会中断查询。与传统的 GraphQL 查询不同,persisted queries 具有唯一的 ID,并且可以根据其 ID 进行缓存。

示例代码

下面是一个简单的博客应用程序,其中包含一个查询最新文章的 GraphQL 查询。我们将使用 Apollo Client 进行缓存,并采用我们之前提到的优化方法。

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

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

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

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

结论

GraphQL 缓存是提高性能和减轻服务器负担的重要方法。在实践过程中,我们可以使用 Apollo Client 和 normalized cache 等工具,采用 TTL 和 keyArgs 等优化策略,提高缓存效率和性能。

希望这篇文章对您了解 GraphQL 缓存有所帮助,同时也能为您的工作带来指导意义。

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


猜你喜欢

  • 移动端 APP 的无障碍开发心得

    无障碍开发是指网站和应用程序的设计和开发,以确保用户无论是身体上还是认知上的限制,都能够方便地访问和使用,而不产生任何障碍。在移动应用程序中,无障碍开发也不可忽视。

    2 个月前
  • Docker 容器备份与恢复

    随着云计算、大数据、人工智能等技术的发展,容器化技术(Container)成为了云原生架构的基石之一,而 Docker 则成为了最流行的容器化技术之一。随着 Docker 的普及,如何做好容器的备份与...

    2 个月前
  • ES7 新增的 JavaScript 操作符

    随着 JavaScript 的不断发展,不断有新特性加入。ES7 引入了许多新的特性,包括一些新的操作符,这些操作符可以让我们更加方便地表达我们的意图,使我们的代码更加简洁和易于理解。

    2 个月前
  • Serverless 应用的自动化测试实战指南

    Serverless 架构的兴起,使得开发人员能够更方便地通过云服务提供商来构建和部署应用程序,同时无需考虑使用和管理虚拟机或服务器。Serverless 也使得自动化测试变得更加容易,因为开发人员不...

    2 个月前
  • Fastify 框架中集成 Swagger

    Swagger 是一个广为使用的开源框架,它可以帮助我们快速地设计、构建、文档化和测试 Web API。Fastify 是近年来非常流行的一种 Node.js 框架,它提供了快速和低开销的 Web 应...

    2 个月前
  • 在 Angular 中使用 NgModule 来管理模块

    随着项目的规模越来越大,我们需要使用模块来将应用程序分解成更小、更易于管理的部分。在 Angular 中,我们使用 NgModule 来管理模块。本文将介绍什么是 NgModule,如何使用 NgMo...

    2 个月前
  • 如何在 Tailwind CSS 2.0 中使用新的背景定位?

    在 Web 开发中,背景图片是一个很常见的元素。但是,如果我们希望定位背景图片的具体位置,以前必须使用 CSS 语法来实现。然而,Tailwind CSS 2.0 提供了一种全新的方法来指定背景图片的...

    2 个月前
  • ECMAScript 2017 (ES8) 中的函数参数默认值详解

    在 ECMAScript 6 (ES6) 中,我们可以使用函数参数默认值来为函数的参数提供默认值。在 ECMAScript 2017 (ES8) 中,我们有了更多的选择来定义函数参数的默认值。

    2 个月前
  • MongoDB 写入性能问题:如何提高性能

    MongoDB 是一种非关系型数据库,常常被用于处理大量数据。然而,在高负载下 MongoDB 的写入性能往往会出现问题,导致应用程序性能下降。本文旨在探讨 MongoDB 的写入性能问题,并介绍如何...

    2 个月前
  • PWA 的本地存储技术及优化方案

    PWA(Progressive Web Apps)是一种新型的 Web 应用程序,在浏览器中工作时可以像原生应用程序一样提供比传统 Web 应用程序更好的用户体验。

    2 个月前
  • Web Components 中如何使用 Redux

    Web Components 是一种新的网络技术,它利用浏览器原生的支持来创建可重用的自定义组件。而 Redux 是一种用于 JavaScript 应用程序的状态容器,提供可预测的状态管理。

    2 个月前
  • 使用 TypeScript 时如何优化代码性能?

    TypeScript 是一种由微软开发并维护的静态类型检查器,它可以在开发中帮助我们发现和修复代码中的错误,并提供了更好的代码开发体验。但是在大型项目中,如果不进行优化,使用 TypeScript 也...

    2 个月前
  • GraphQL实现的分布式架构指南

    前言 在过去,RESTful API 是构建分布式应用程序的主要选择,但所有有经验的开发人员都会意识到其缺点,如缺乏数据一致性,冗长的请求和响应,以及不充分的文档和版本管理。

    2 个月前
  • 使用 Koa-Multer 库实现文件上传功能

    在前端开发中,文件上传功能是一个常见的需求,例如上传头像、上传图片、上传视频等。而使用 Koa-Multer 库则可以很方便地实现这个功能。 Koa-Multer 简介 Koa-Multer 是一个基...

    2 个月前
  • ES2019常用新特性:不要再老用旧方法了

    ES2019是JavaScript语言的最新标准,其中包含了许多新的特性和语法。这些新特性旨在提高开发效率、代码质量和性能。在本文中,我们将针对其中一些常用的新特性进行介绍和讲解,以帮助前端开发者更好...

    2 个月前
  • 如何使用 Jest 进行输入输出测试

    Jest 是一个用于 JavaScript 的测试工具,它可以帮助你进行各种类型的测试,包括输入输出测试,单元测试等。在前端开发中,输入输出测试非常重要,因为它可以确保你的代码逻辑正确,并且能够正确地...

    2 个月前
  • 如何为 TypeScript 写单元测试

    Typescript 是目前前端领域中最流行的语言之一,其静态类型检查能力使得代码更加可靠、易于维护。然而,即使使用了 Typescript,也不能完全避免程序中的错误。

    2 个月前
  • Apollo和Relay在GraphQL中的区别和选择

    GraphQL是一个被广泛使用的API查询语言,它具有强大的能力和适用性。许多开发人员喜欢使用GraphQL以获取更精确的数据,并提高API的性能和效率。在GraphQL中,有两个主要的客户端库:Ap...

    2 个月前
  • 无障碍漫谈之识别色盲网友

    在网页设计过程中,我们通常会使用颜色来强化信息、指示状态以及传达情感。但是,这可能会对色盲网友造成一定程度的困扰。色盲是一种视觉障碍,它影响了一个人识别和区分颜色的能力。

    2 个月前
  • 为什么说响应式设计是一种前端哲学?

    响应式设计是一种旨在让网站在不同设备上拥有类似体验的设计理念。它是一种前端哲学,因为它强调了前端开发者需要考虑更多的用户体验问题,而不是简单地将设计照搬到每个设备上。

    2 个月前

相关推荐

    暂无文章