搜索
首页web前端css教程使用GraphQL缓存

使用GraphQL缓存

Mar 19, 2025 am 09:36 AM

Working With GraphQL Caching

GraphQL缓存机制解析:打破缓存误区

您可能听说过诸如“GraphQL不支持缓存”或“GraphQL不关心缓存”之类的说法。对于许多人来说,这是一个大问题。但事实并非如此。GraphQL官方文档中提到了多种缓存技术,可见其开发团队非常重视缓存及其性能优势。

本文旨在澄清GraphQL与缓存之间的关系,并介绍不同的缓存技术以及如何利用缓存优化GraphQL查询。

GraphQL自动缓存机制

考虑以下用于获取帖子及其作者的查询:

query getPost {
  post(slug: "working-with-graphql-caching") {
    id
    title
    author {
      id
      name
      avatar
    }
  }
}

实现GraphQL自动缓存的“秘诀”是__typename元字段,所有GraphQL API都提供此字段。顾名思义,__typename返回对象的类型名称。此字段甚至可以手动添加到现有查询中,大多数GraphQL客户端或CDN会自动添加它,例如urql。服务器接收到的查询可能如下所示:

query getPost {
  post(slug: "working-with-graphql-caching") {
    __typename
    id
    title
    author {
      __typename
      id
      name
    }
  }
}

包含__typename的响应可能如下所示:

{
  data: {
    __typename: "Post",
    id: 5,
    title: "Working with GraphQL Caching",
    author: {
      __typename: "User",
      id: 1,
      name: "Jamie Barton"
    }
  }
}

__typename是GraphQL缓存的关键,因为它允许我们缓存结果,并知道它包含Post ID 5和User ID 1。

Apollo和Relay等库也提供一定程度的内置缓存,用于自动缓存。由于它们已经知道缓存中的内容,因此它们可以利用缓存而不是远程API来获取客户端在查询中请求的内容。

自动失效缓存

假设帖子作者使用editPost变异修改了帖子的标题:

mutation {
  editPost(input: { id: 5, title: "Working with GraphQL Caching" }) {
    id
    title
  }
}

由于GraphQL客户端会自动添加__typename字段,因此此变异的结果会立即告诉缓存Post ID 5已更改,并且包含该帖子的任何缓存查询结果都需要失效:

{
  data: {
    __typename: "Post",
    id: 5,
    title: "Working with GraphQL Caching"
  }
}

下次用户发送相同的查询时,查询将从源获取新数据,而不是使用缓存中的过期结果。

规范化GraphQL缓存

许多GraphQL客户端不会缓存整个查询结果。相反,它们会将缓存数据规范化为两种数据结构:一种将每个对象与其数据关联起来(例如,Post #5:{…},User #1:{…}等);另一种将每个查询与其包含的对象关联起来(例如,getPost:{Post #5,User #1}等)。

请参阅urql关于规范化缓存的文档或Apollo的“Demystifying Cache Normalization”以了解具体的示例和用例。

GraphQL缓存的边缘情况

GraphQL缓存无法自动处理的一个主要边缘情况是向列表中添加项目。因此,如果createPost变异通过缓存,它不知道要将该项目添加到哪个特定列表中。

最简单的“解决方法”是在变异中查询父类型(如果存在)。例如,在下面的查询中,我们查询了post上的community关系:

query getPost {
  post(slug: "working-with-graphql-caching") {
    id
    title
    author {
      id
      name
      avatar
    }

    # Also query the community of the post
    community {
      id
      name
    }
  }
}

然后我们也可以从createPost变异中查询该community,并使包含该community的任何缓存查询结果失效:

mutation createPost {
  createPost(input: { ... }) {
    id
    title

    # Also query and thus invalidate the community of the post
    community {
      id
      name
    }
  }
}

虽然并不完美,但类型化模式和__typename元字段是使GraphQL API非常适合缓存的关键。

您可能认为所有这些都是权宜之计,GraphQL仍然不支持传统的缓存。您不会错。由于GraphQL通过POST请求运行,您需要卸载到应用程序客户端并使用上述“技巧”来利用GraphQL的现代浏览器缓存。

但是,这种方法并不总是可行的,也不是管理客户端缓存的最佳方法。对于更棘手的情况,GraphQL客户端需要您手动更新缓存,但像GraphCDN这样的服务提供了“类似服务器”的缓存体验,还提供了一个手动清除API,允许您执行以下操作以获得更好的缓存控制:

# Purge all occurrences of a specific object
mutation {
  purgeUser(id: [5])
}
# Purge by query name
mutation {
  _purgeQuery(queries: [listUsers, listPosts])
}
# Purge all occurrences of a type
mutation {
  purgeUser
}

现在,无论您在何处使用GraphCDN端点,都不再需要在移动端、Web端等所有客户端逻辑中重新实现缓存策略。边缘缓存使您的API速度非常快,并通过在用户之间共享缓存并将其与每个用户的客户端分开来减少负载。

最近在一个项目中使用了GraphCDN,它帮我处理了客户端或服务器上的缓存配置,让我能够继续我的项目。例如,我可以将我的端点替换为GraphCDN,并免费获得查询复杂性(即将推出)、分析等功能。

那么,GraphQL是否关心缓存?当然关心!它不仅提供了一些内置的自动缓存方法,而且许多GraphQL库提供了其他方法来实现和管理缓存。

希望本文能帮助您了解GraphQL缓存机制,以及如何在客户端实现它,以及如何利用CDN来完成所有工作。我的目标不是说服您在所有项目中都使用GraphQL,但如果您正在选择查询语言并且缓存是一个重要因素,请知道GraphQL完全能够胜任这项任务。

以上是使用GraphQL缓存的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
每周平台新闻:改进慢速连接上的UX,用于编写ALT文本的提示和HTML加载属性的多填充每周平台新闻:改进慢速连接上的UX,用于编写ALT文本的提示和HTML加载属性的多填充Apr 17, 2025 am 11:09 AM

在本周的综述中,如何确定慢速连接,我们应该在图像中放入alt文本中的内容以及用于HTML加载属性的新polyfill,

可重复使用的弹出式添加一点流行音乐可重复使用的弹出式添加一点流行音乐Apr 17, 2025 am 11:02 AM

弹出窗口是一种瞬态视图,当用户单击控制按钮或定义区域内时,屏幕上的内容顶部显示在屏幕上。例如,

带有真实下划线的造型链接带有真实下划线的造型链接Apr 17, 2025 am 10:57 AM

在进入如何样式下划线之前,我们应该回答以下问题:我们应该强调吗?

每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow domApr 17, 2025 am 10:55 AM

在本周的平台新闻综述中,Chrome引入了一个用于加载的新属性,Web开发人员的可访问性规范以及BBC Move

带有GraphQL的多人游戏TIC TAC TOE带有GraphQL的多人游戏TIC TAC TOEApr 17, 2025 am 10:54 AM

GraphQL是API的查询语言,对前端开发人员非常有能力。正如GraphQL网站所解释的那样,您可以描述您的数据,询问什么

使用CSS变量的逻辑操作使用CSS变量的逻辑操作Apr 17, 2025 am 10:44 AM

通常,在使用开关变量(一个0或1的变量时,这是本文中更详细地解释的概念),我希望我可以

懒负载嵌入YouTube视频懒负载嵌入YouTube视频Apr 17, 2025 am 10:40 AM

通过亚瑟·科伦赞(Arthur Corenzan),这是一个非常聪明的主意。与其使用默认的YouTube嵌入,该YouTube嵌入了,这会在用户播放的情况下在页面上添加大量资源

您可以在CSS中旋转光标吗?您可以在CSS中旋转光标吗?Apr 17, 2025 am 10:28 AM

kind!没有简单或标准的方法可以做到这一点,但是它可能是可能的。您可以使用CSS将光标更改为不同的内置本机版本

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器