首页
学习
活动
专区
工具
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 的模式和类型系统,允许它们在客户端保留缓存。

56210

如何在纯 JavaScript 中使用 GraphQL

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

3.6K10
  • 怎样使用 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.4K100

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

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

    93820

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

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

    2.6K20

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

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

    78540

    HTTP1.1协议状态码

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

    2.7K40

    客快物流大数据项目(八十二):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树索引判断是否命中修改的数据主键

    51582

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

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

    1.2K40

    最近的面试都在问些什么?

    使用LIKE操作符进行模糊匹配,查询条件中的数据类型与索引列的数据类型不匹配导致隐式类型转换,查询中对索引列进行了计算或使用了函数; 如果数据量小, 不走索引;当使用order by时, 如果发现走索引的效率比较慢...复合索引会按照索引列的顺序对数据进行排序,最左前缀表示当查询条件包含复合索引中最左边的列时,数据库能够利用索引来加速查询。 该语句为什么查询慢? 有什么优化思路?...覆盖索引:索引包含了查询所需的所有字段; 索引下推:在索引扫描阶段过滤掉不满足条件的数据(5.6及以上版本支持); 使用分区表:将大表分解为小表,减少单个索引大小。...InnoDB存储引擎:默认使用行锁,当对某一行数据操作时,锁定行而不是整个表;当全表扫描时使用表锁,如果事务涉及的操作无法通过行锁实现,也会使用表锁; MyISAM存储引擎:只支持表锁,每次写操作会锁定整个表...悲观锁在数据访问时加锁,通常用于写密集型场景,或者在数据冲突概率较高的情况下使用,排他锁; 乐观锁在提交更新时进行冲突检查,通常用于读密集型场景,或者在数据冲突概率较低的情况下使用,版本号机制,时间戳机制

    12310

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

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

    2.1K45

    【搜索引擎】提高 Solr 性能

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

    70810

    HTTP 缓存头部 - 完全指南

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

    1.3K20

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

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

    1.6K80

    *当你在浏览器地址栏输入一个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....缓存使用:显示了缓存命中和未命中的情况。 模板渲染时间:记录了每个模板渲染所需的时间。 中间件和视图处理时间:显示了中间件和视图处理每个请求所需的时间。

    14710

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

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

    56210

    HTTPS之TLS性能调优

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

    1.6K30

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

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

    70110
    领券