首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当初始查询响应不包含所需的__typename时,如何使用urql更新grapqhl缓存?

当初始查询响应不包含所需的__typename时,可以使用urql更新GraphQL缓存的方法如下:

  1. 确保在GraphQL查询中包含所需的__typename字段,以便在初始查询响应中获取类型信息。
  2. 在urql的客户端配置中,使用updates选项来定义更新缓存的逻辑。updates是一个函数,它接收一个参数cache,代表当前的缓存实例。
  3. updates函数中,可以使用cache.modify方法来更新缓存。cache.modify接收一个对象参数,其中包含fields属性,用于指定要更新的字段。
  4. fields属性中,可以使用GraphQL的查询路径来指定要更新的字段。例如,如果要更新User类型下的name字段,可以使用User.name作为路径。
  5. fields属性中,可以使用readField方法来读取缓存中的字段值。readField接收两个参数,第一个参数是要读取的字段路径,第二个参数是一个可选的上下文对象。
  6. fields属性中,可以使用writeField方法来写入缓存中的字段值。writeField接收三个参数,第一个参数是要写入的字段路径,第二个参数是要写入的值,第三个参数是一个可选的上下文对象。
  7. writeField方法中,可以使用typename属性来指定要写入的字段的类型。这样可以确保缓存中的字段类型正确。
  8. writeField方法中,可以使用merge选项来指定如何合并新值和旧值。merge选项是一个函数,它接收两个参数,分别是旧值和新值,返回合并后的值。

综上所述,使用urql更新GraphQL缓存的步骤如下:

  1. 在GraphQL查询中包含所需的__typename字段。
  2. 在urql的客户端配置中定义updates函数。
  3. updates函数中使用cache.modify方法更新缓存。
  4. fields属性中使用readField方法读取缓存中的字段值。
  5. fields属性中使用writeField方法写入缓存中的字段值,并指定字段的类型。
  6. 可选:使用merge选项指定如何合并新值和旧值。

以下是一个示例代码:

代码语言:txt
复制
import { createClient, dedupExchange, cacheExchange } from 'urql';
import { gql } from '@urql/core';

const client = createClient({
  url: 'https://api.example.com/graphql',
  exchanges: [
    dedupExchange,
    cacheExchange({
      updates: {
        Mutation: {
          updatePost: (result, args, cache, info) => {
            cache.modify({
              fields: {
                Post: (existingPost, { readField, writeField }) => {
                  const newPost = writeField('title', args.title, {
                    typename: 'Post',
                    merge: (oldValue, newValue) => newValue,
                  });
                  return newPost;
                },
              },
            });
          },
        },
      },
    }),
  ],
});

const UPDATE_POST = gql`
  mutation UpdatePost($id: ID!, $title: String!) {
    updatePost(id: $id, title: $title) {
      id
      title
    }
  }
`;

client
  .mutation(UPDATE_POST, { id: '123', title: 'New Title' })
  .toPromise()
  .then((result) => {
    // Mutation completed
  });

在上述示例中,我们定义了一个updatePost的mutation,并在updates函数中使用cache.modify方法更新缓存。在fields属性中,我们使用writeField方法将新的title值写入缓存中的Post字段,并指定字段的类型为Post

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

REST API和GraphQL API比较

RESTful API 使用 HTTP 方法在处理数据执行 CRUD(创建、读取、更新和删除)过程。 为了促进缓存、AB 测试、身份验证和其他过程,标头向客户端和服务器提供信息。...主体包含客户端想要传输到服务器数据,例如请求有效负载。 GraphQL API GraphQL 是一种用于 API 查询语言,也是使用现有数据完成这些查询运行时。...使用 GraphQL,您可以向您 API 发送请求并接收准确响应,而无需进一步添加。因此,来自 GraphQL 查询极其可预测响应提供了良好可用性。...它们也可以由客户端存储以供经常使用,并由浏览器缓存。GraphQL 通过单个端点提供,通常是 (/graphql),并且与 HTTP 规范不同。因此,无法像 REST API 那样缓存查询。...但是,由于可用工具,客户端缓存优于 REST。一些使用缓存客户端(Apollo Client,URQL使用 GraphQL 模式和类型系统,允许它们在客户端保留缓存

39810

如何在纯 JavaScript 中使用 GraphQL

由于 GraphQL 是通过单个端点运行,因此端点响应数据完全取决于你查询。这个查询需要正确格式化 GraphQL。想知道如何构建查询吗?请查阅关于如何编写 GraphQL 查询教程。...查询包含多个命名操作查询,它用于指定要运行操作。 如果你将一个 GraphQL 作为一个 GET 请求发送,则需要将以上内容作为查询参数传递。...这应该是一个 JSON 格式列表,其中查询所需每个变量在 JSON 中都有一个对应值。...JSON 响应,其中包含浏览器中显示角色和剧集数据。...显然,一般来说你不会想要简单地向用户显示查询结果,因此让我们看一下如何使用返回数据。 使用 GraphQL 查询响应 GraphQL 一大优点是,它响应只是纯 JSON,因此数据使用起来很容易。

3.5K10

怎样使用 apollo-link-state 管理本地数据

我们可以使用 GraphQL mutation 来表述应用状态变化过程,而不是去发送某个 action。在查询应用状态,GraphQL query 也能以一种声明式方式描述出组件所需数据。...Defaults 前文 defaults 字段是一个用于表示状态初始 object, state link 刚创建,这个默认值会被写入 Apollo Client 缓存。...尽管不是必需参数,不过预热缓存是一个很重要步骤,传入 default 使得组件不会因为查询不到数据而出错。 . 以上代码 defaults 代表了 Apollo cache 初始值。...Resolvers 在使用 Apollo Client 管理应用状态后,Apollo cache 成为了应用单一数据源,包括了本地和远端数据。那么我们应当如何查询更新缓存数据呢?...上文我们使用了 InMemoryCache,因此索引形式应当是 __typename:id。

2.3K100

因为喜欢所以升级,MyStaging-3.0 继续

支持多种数据库类型,和 EF 不同是,对单个项目的多路上下文支持中引进了主从数据库概念,查询默认从库,也可以指定主库,删除/修改/新增操作默认走主库,底层还提供了对单个查询数据分布式缓存操作,可以自由灵活配置...,该文件即为上下文对象;相反,可以使用了CodeFirst进行 Model 实体对象迁移,MyStaging 会检查指定程序集实体对象,发现对象携带 TableAttribute 特性,MyStaging...初始化 DbContext 上下文对象,要求传入一个配置 StagingOptions,该 StagingOptions 包含了一些必须和可选配置 public StagingOptions(string...,slaves=从库连接字符串(支持多个),其它没有出现在构造函数中属性,表示可选参数,可选参数包含了 CacheOptions(缓存选项)和 Logger(日志组件)。...如果你配置了日志和缓存,MyStaging将在某些场景下启用该设置,比如针对查询单个对象主键缓存缓存还支持分布式缓存(IDistributedCache) 最终初始化上下文对象 // 控制台应用程序

89320

干货 | 携程基于 GraphQL 前端 BFF 服务开发实践

我们在一次 GraphQL 查询中,通过这些关联字段,获取到所需数据,而不必再次发起请求。...假设我们实现了以下 GraphQL 接口: 查询 addTodo 节点,其 resolver 函数抛出错误,将会出现在顶层 errors 数组里,而 data.addTodo 则为 null。...我们用如下查询语句查询 GraphQL 服务:  Grandchild  value 结果为 1 查询结果如下: 我们得到了符合 GraphQL 类型结果,所有数据都有值。... Grandchild  value 结果为 null 查询结果如下: 通过空值冒泡,Grandchild 空值,被冒泡到 parent 节点,令 parent 结果也为空。...而且因为没有执行更新,且操作符变成了 query,两个获取数据接口调用又会变成并行,提高了响应速度。

2.5K20

原来这样就可以提升页面首屏渲染性能

我们知道渲染页面是一个将服务器响应内容翻译成图片过程。但是,如果你页面的渲染性能比较糟糕的话,可能会带来相对较高跳出率。 在本文中,我将重点关注网页初始渲染,即它从解析 HTML 开始。...如下图所示: img 首先,一旦浏览器得到响应,它就会开始解析它。它遇到依赖项,它会尝试下载它。...有些可能很少改变或根本不会改变,有的则是变化很快,还有些文件包含敏感信息(可以使用“private” 防止 CDN 缓存私有数据)。 2. 减少关键资源总数 “关键”仅指网页正确呈现所需资源。...因此,最好以首先加载所需样式和脚本方式重新排列与渲染相关所有内容,而其他所有内容都停止(既不解析也渲染)。...结尾 总而言之,网站性能优化包含了网站响应各个方面,例如缓存、设置 CDN、重构、资源优化等,但是所有这些都可以逐步完成。

73940

HTTP1.1协议状态码

且仅第二个请求中使用方法是GET或HEAD,才可以由用户代理执行所需操作,而无需与用户进行交互。客户端应该检测到无限重定向循环,因为这样循环会为每个重定向生成网络流量。...否则(即,条件GET使用弱验证器),响应中不得包含其他实体标头;这样可以避免缓存实体与更新标头之间不一致。...如果304响应指示当前未缓存实体,则缓存必须忽略该响应,并在没有条件情况下重复该请求。 如果缓存使用接收到304响应更新缓存条目,则缓存必须更新该条目以反映响应中给定任何新字段值。...仅客户端将不正确POST请求转换为带有长查询信息GET请求,客户端下降到重定向URI“黑洞”(例如,指向URI重定向URI前缀),才会发生这种罕见情况后缀),或者服务器受到客户端攻击,...---- 501 Not Implemented 服务器不支持满足请求所需功能。服务器无法识别请求方法并且不支持任何资源,这是适当响应

2.6K40

客快物流大数据项目(八十二):Kudu读写原理

条件将新增数据真正持久化到磁盘DiskRowSet内;对老数据update和delete操作是提交到内存中DeltaMemStore;触发flush条件时会将更新和删除操作持久化到磁盘DIskRowSet...中DeltaFile内,此时老数据还在BaseData内(逻辑删除),新数据已在DeltaFile内;触发compaction条件,将DeltaFile和BaseData进行合并,DiskRowSet...tablet所在位置;为了优化读取和写入,客户端将元数据进行缓存;根据分区策略,路由到对应Tablet,请求Tablet Leader;根据RowSet记录主键范围过滤掉包含新增数据主键RowSet...;根据RowSet 布隆过滤器再进行一次过滤,过滤掉包含新数据主键RowSet;查询RowSet中B树索引判断是否命中新数据主键,若命中则报错主键冲突,否则新数据写入MemRowSet;返回响应给客户端...根据RowSet记录主键范围过滤掉包含修改数据主键RowSet根据RowSet 布隆过滤器再进行一次过滤,过滤掉包含修改数据主键RowSet查询RowSet中B树索引判断是否命中修改数据主键

45582

【最佳实践】巡检项:内容分发网络(CDN)预热容量

问题描述 域名接入CDN后,初始状态下,加速节点上无任何域名资源缓存,当用户请求至 CDN 加速节点,需要回源拉取资源同时根据策略进行缓存。...提前将涉及活动资源预热到CDN加速节点,让用户访问所有静态资源均由加速节点响应, 既保障了源站压力,又能加速响应速度,提升用户体验。...查看及申请配额 点击『服务查询』--》『配额管理』--》『配额详情』可以看到有关CDN可预热使用情况, 并且可以点『申请』进行额度申请。...境外预热所产生边缘层流量会计入计费流量 节点加载资源时会回源拉取所需内容,因此提交大批量预热任务后,可能会造成源站带宽增大。节点加载内容,若其缓存同名资源尚未过期,则不会进行资源加载。...建议在同名文件更新,先进行全网刷新。 URL 刷新、目录刷新和查询刷新记录已经接入权限系统,支持资源(域名)维度权限配置,详细说明请参见权限配置。

1.1K40

HTTP 缓存头部 - 完全指南

、在什么条件下来缓存响应,以及缓存多久 不需要服务器通信请求被认为是最佳请求:使用响应本地副本,既可以消除网络延迟,又能避免数据传输带来网络负载。...这个指令是明确针对中间人缓存 CDN 这个指令出现在头部中,会覆盖掉 `max-age` 和 `expires` 设置。...这个例子将展示其作用:在首次获取一个资源 90 秒后,发起一次新浏览器请求(完全一样资源);浏览器寻找本地缓存找到上一次缓存请求后并发现其过期,就会从服务器请求完整内容 -- 问题是,如果资源没有改变过...web 开发者如何从重新生效中获益? 浏览器为 web 开发者承担了大多数工作。比如,浏览器自动检测到前一次指定有效性 token ,将其附加到随后请求中,并按需基于服务器响应更新缓存时间戳。...可以将其视为一个 HTTP/1.0 时代遗留校验器。缓存保存了一个包含此头部资源,可以利用其查询服务器资源是否已超时(从资源上次被使用时)。

1.2K20

【图文并茂】一步步带你了解Web站点架构

使用MySQL主从架构添加缓存使用缓存模式中“旁路”缓存模式(下面有介绍缓存工作模式),而在此处缓存内容主要是缓存MySQL查询对象,也就是MySQL对象查询缓存结果。...所以数据缓缓存并不取决于缓存服务器,而取决于请求方(也就是客户端) 1.9 MySQL主从架构读写分离 由于MySQL已经部署成为主从架构,那么又衍生另一个问题,如果用户请求发送到MySQL服务器,应如何区分读和写请求...,所以一般也建议使用这样地方。...,其中Varnish可以直接响应HAProxy请求,Varnish没有数据,会去赵Nginx,Nginx会从后端检索数据,然后返回给Varnish,Varnish会将检索到数据缓存下来,然后在响应给...而且业务需要发布更新,我们需要将所有的更新脚本文件分发至各对应节点,并同步执行更新,而这些操作简单却繁琐,仅仅重复相同操作。

1.6K80

后台服务架构高性能设计之道

连接池实现通常需要考虑以下几个问题: 1)初始化:启动即初始化和惰性初始化。启动初始化可以减少一些加锁操作和需要可直接使用,缺点是可能造成服务启动缓慢或者启动后没有任务处理,造成资源浪费。...惰性初始化是真正有需要时候再去创建,这种方式可能有助于减少资源占用,但是如果面对突发任务请求,然后瞬间去创建一堆连接,可能会造成系统响应慢或者响应失败,通常我们会采用启动即初始方式。...5.2 冗余请求 冗余请求指的是同时向后端服务发送多个同样请求,谁响应快就是使用谁,其他则丢弃。这种策略缩短了客户端等待时间,但也使整个系统调用量猛增,一般适用于初始化或者请求少场景。...有两种解决方案:① 采取主从备份,主节点故障直接将从实例替换主;② 使用一致性哈希替代取模,这样即使有实例崩溃也只是少部分缓存命中。...4)单调读:保证用户读请求都发到同一个从节点,避免出现回滚现象。如用户在 M 主节点更新信息后,数据很快同步到了从节点 S1,用户查询请求发往 S1,看到了更新信息。

1.8K44

【搜索引擎】提高 Solr 性能

基线 在我们最大市场中部署 Solr 后,我们必须对其进行测试。我们使用内部工具进行压力测试,我们可以大致获得所需流量。...您进一步阅读,您会发现更多信息。 文档与磁盘大小 假设我们有大约 1000 万个文档。假设平均文档大小为 2 kb。...最初,您磁盘空间将至少占用以下空间: 分片 一个集合拥有多个分片并不一定会产生更具弹性 Solr。一个分片出现问题而其他分片无论如何都可以响应时,时间响应或阻塞器将是最慢分片。...让我们快速了解一下 Solr 是如何使用内存。首先,Solr 使用两种类型内存:堆内存和直接内存。直接内存用于缓存从文件系统读取块(类似于 Linux 中文件系统缓存)。...Solr 使用直接内存来缓存从磁盘读取数据,主要是索引,以提高性能。 它被暴露,大部分堆内存被多个缓存使用。 JVM 堆大小需要与 Solr 堆需求估计相匹配,以及更多用于缓冲目的。

66010

*当你在浏览器地址栏输入一个URL后回车,将会发生什么事情?*

——如果浏览器包含所需记录,则浏览器将进行系统调用(Windows中为gethostbyname),操作系统是具有自己DNS缓存。...(4)ISP DNS缓存——ISP(Internet Service Provider)因特网服务提供商,DNS服务器通常有两种,一种是权威DNS,一种是缓存DNS,ISP运营商一般是缓存DNS,给用户查询使用...;域名商是权威DNS,给缓存DNS查询使用。...,传入链接越短站点排名越低,搜索引擎理解重定向(301),并将来自两个来源传入链接合并到一个排名中;同样,相同内容多个URL也不利于缓存一条内容具有多个名称,可能会在缓存中多次出现。...七、服务器发回HTML响应 这是服务器生成并发回响应: image.png 该响应内容告诉浏览器: (1)响应体用gzip算法压缩,解压缩后即可看到所需HTML; (2)Cache-Control标头指定是否以及如何缓存页面

2.2K30

Django性能之道:缓存应用与优化实战

何时使用缓存数据库查询或计算成本较高,可以使用缓存来存储结果,避免重复计算。 页面内容不经常变化、但需要频繁访问,可以使用缓存来加速页面加载速度。...需要提高系统性能、减少响应时间,可以使用缓存来缓解服务器压力。 缓存命名规则: 唯一性:缓存键应该具有唯一性,避免与其他缓存键冲突。...静态缓存:静态缓存是在请求生成一次缓存,并在缓存时间内不再更新缓存。这种缓存方式适用于数据稳定且更新频繁场景。...在使用缓存,需要考虑缓存失效策略、超时设置以及动态数据更新缓存更新。 1....缓存使用:显示了缓存命中和未命中情况。 模板渲染时间:记录了每个模板渲染所需时间。 中间件和视图处理时间:显示了中间件和视图处理每个请求所需时间。

7510

API设计中性能提升10个建议

必须要投资适当网络基础设施,以便我们能够维持所需性能水平,有时候,可以通过利用和购买足够云资源来实现。 3 减少有效负载 如果响应数据有效负载非常大,将会减慢请求完成时间,并影响性能。...有效数据压缩减少了在 web 应用程序上响应下载量,同时提高了上传速度。 4 使用缓存 缓存是提高 API 性能最简单方法之一。...如果有经常返回相同响应请求,那么该响应缓存有助于避免额外服务调用和数据库查询。需要注意是,确保在缓存使用生命周期,尤其是在发生数据更新时候。缓存增强了可伸缩性。...此外,可能希望指定要包含响应资源字段或属性,从而限制返回数据量,最终希望查询特定值并对返回数据进行排序。 分页有助于从多个响应创建大量内容。...这种优化有助于改进响应,同时保存传输/显示给客户数据。链接在响应中返回,api 变得更具自我描述性。

66510

缓存,确实很香!浅谈用不好缓存几个受伤场景!

追溯一下自己最开始使用缓存场景,一些数据库里存储不变配置信息,服务启动,直接加载到本地公共模块,方便其它功能模块共享使用。这便是最基本,最简单本地缓存应用。...有了这“矛盾”引子,便有了对缓存迫切需求。 我们说缓存,必然要是存放于内存中,这样它便能距离应用更近,更快给出应用所需数据,以获得更快服务响应。 ?...当然,并不是缓存完全隔绝持久层数据。缓存,伴随而生一个词叫做命中率。 当我们查询数据存在于缓存时候,我们称之为“命中”,此时,所需数据可以直接由缓存提供。...其实,无论是初始未加载还是缓存过期,删除,这些都属于我们假定正常应用场景,再次我们不予过多评论。 数据从来不存在 一个查询不存在数据请求到来,其必然会穿过缓存,达到持久化存储层。...持久化存储响应能力是有限这种请求达到一定量级,服务可能就要面临着宕机危险。 至此,我们对于缓存作用认知,也需要进一步延伸:降低下层负载,保护后端资源。 ?

54610

HTTPS之TLS性能调优

配置较大长连接超时时间,限制并发连接数以免服务器超负荷是至关重要。通过测试调整服务器,使其运行在容量限制内。...使用 CDN ,用户连接到最近 CDN 节点,这只有很短距离,TLS 握手网络延迟也很短;而 CDN 与服务器之间可以直接复用已有的远距离长连接。...证书链长度和正确性对握手性能有很大影响。 使用尽可能少证书 证书链里每个证书都会增大握手数据包,证书链中包含太多证书有可能导致 TCP 初始拥塞窗口溢出。...使用 OCSP OCSP 被设计用于提供实时查询,允许用户代理只请求访问网站吊销信息,查询简短而快速(一个HTTP请求)。相比之下 CRL 是一个包含大量被吊销证书列表。...使用具有快速且可靠 OCSP 响应程序 CA 另一个选择 CA 标准是它更新 OCSP 响应程序速度。

1.5K30

GraphQL项目中前端如何预生成Persisted Query

但是不足地方就在于, 没有办法使用http cache, HTTP 缓存 - HTTP | MDN /虽然 HTTP 缓存不是必须,但重用缓存资源通常是必要。...然而常见 HTTP 缓存只能存储 GET 响应,对于其他类型响应则无能为力。/ 当然, 我们可以将默认请求类型改为GET, 但是schema过大时候 ,就会出问题了....如何使用persisted query?...预生成persisted query 刚刚我们介绍了, 如何使用过程中生成. 但是如何预生成呢? 也就是, 在前端部署过程中或者是在访问页面之前就已经生成好....简单来说, 还是为了更好优化, 试想一下, 如果我已经可以将一个大量访问schema变动提前缓存起来, 并且准备好这份数据, 当前端访问时候, 我直接将这份缓存数据扔给前端, 而不是再在后台重新查询拼接

99120
领券