问题标签 [apollo-cache-inmemory]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
74 浏览

apollo - 防止客户端查询在路由更改后重新运行

我是 ApolloClient/GQL 的新手,但我知道它可以很好地缓存以防止多个查询。我的应用程序中有一个<RootProvider />,它在安装时会运行查询以获取我的帐户列表。然后用户选择他们的帐户,它 1) 更新 Global Redux 提供程序,2) 导航到帐户概览页面。如果我随后“切换”我的帐户(使用 清除 selectedAccount setSelectedAccountId('')),则 URL 将返回到 root 并且查询再次运行。我已经尝试了条件查询,useLazyQuery并且我已经尝试skip了自身内部的选项useQuery,但都没有成功。Skip 本身甚至不会返回缓存的数据。

是否有确保数据在路由之间缓存的技巧?

应用程序:

根提供者:

查询GET_ACCOUNTS本身:

我试图更新 RootProvider 以使用useLazyQuery“已安装”状态:

我很欣赏任何见解。

0 投票
1 回答
448 浏览

caching - #[apollo-cache-persist] 清除缓存数据 | apollo-cache-persist 错误 | 阿波罗缓存持久不工作

这是我使用'apollo3-cache-persist'用于缓存持久性的代码,似乎在初始缓存后自动清除缓存的数据。清除会清除存储中用于持久性的所有内容。因此导致不坚持。

0 投票
1 回答
567 浏览

pagination - 在具有“合并”功能的 apollo 客户端分页配置中,即使调用 fetchMore,现有缓存数据也始终为空

我是 Apollo Client 的新手,我正在尝试为我的产品列表实现分页。但我不明白为什么合并函数中的现有参数总是返回空。每次调用 fetchMore 时,我的传入参数总是使用新列表更新,但现有参数始终为空这就是为什么我无法将新列表与旧列表合并的原因。

这是我的客户端配置:

这是我的 Graphql 回复:

这是我的查询:

我正在调用fetchMore像这样:

0 投票
1 回答
387 浏览

reactjs - Apollo 客户端缓存和 Next.js

每个人!

我使用 Next.js 和getStaticProps函数来获取服务器端的数据。它可以很好地获取数据,但有一个例外。

Can't find field '<field>' on ROOT_QUERY object执行功能后我收到错误client.readQuery({ query: QUERY })

当我在client.cache.data.data客户端查看时,我注意到我试图从缓存中获取并且在服务器端获取的字段不在它附近,ROOT_QUERY而是在它附近(红色)。

在 ROOT_QUERY 中,我只能看到在客户端获取的字段(绿色)。在此处输入图像描述

但是在服务器端,所有字段都在ROOT_QUERY在此处输入图像描述.

当然,我可以通过 props 传递获取的数据并使用它们,但我想改用缓存。

如果有人遇到这种情况,我想得到如何处理的建议。谢谢。

这是我的 apollo 客户端配置。

0 投票
1 回答
326 浏览

apollo - Apollo 客户端在应该发出网络请求时错误地从缓存中读取

我有一系列 Apollo 查询,其工作方式如下:

  • 可以进行查询以从特定位置检索子资源Website
  • Apollo 服务器不是将WebsiteID 作为输入参数传递,而是从 HTTP 标头或 cookie 中检索 ID。
  • 因此,查询看起来像这样:

在当前网站更改之前,此方法效果很好。这是因为 Apollo 客户端已经在缓存中有一个网站,并且会从缓存中检索第一个(并且不正确的)网站,而不是发出另一个 HTTP 请求。我相信这是因为查询不包含唯一 ID,因此它将所有currentWebsite查询视为相同。

现在我知道有很多方法可以解决这个问题。以下是我知道的方法,以及感知到的缺点:

  1. 更新 Apollo 服务器以允许接收websiteId作为输入 arg。我对此进行了测试,并且可以正常工作。不幸的是,更新 API 需要做很多工作。
  2. 将默认值更改fetchPolicy为类似cache-and-network. 这是一个快速修复,但会发出比它需要的更多的 HTTP 请求。
  3. 当网站更改时,手动使部分缓存失效。这是我最不喜欢的解决方案。
  4. 手动从缓存中读取。如果查询不存在,请useQuery使用 fieldPolicy 之类的调用network-only。这感觉非常沉重。

最终,我认为这些解决方案中的任何一个都不是我所需要的。我觉得必须有一种方法可以为 Apollo 缓存每个查询的网站 ID,以便它可以自行确定是应该从缓存中检索网站还是获取新网站。我发现 Apollo 缓存相当不透明,不知道从哪里开始!

0 投票
2 回答
1256 浏览

reactjs - 更新 apollo 缓存而不调用 graphql 服务器(apollo v3.3)

我正在构建一个反应应用程序,我有一个数据表并直接在我想要的数据流上更新,当我将数据发送到 graphql 服务器进行更新并获取true结果然后我将更新 apollo 缓存cache.writeQuery

  • 问题是当下面的代码执行时,还有一个请求graphql服务器从整个表中获取数据并更新缓存,我不想请求graphql服务器工作。在那里,我想从浏览器更新。那么我哪里做错了?

这是我的代码

"@apollo/client": "^3.3.7"

更新1:

我将首先调用 graphql 服务器来获取数据并将其存储在 apollo 的(缓存和网络)缓存中。然后我想更新缓存中的数据,而不必调用 apollo 服务器到refetchQueries如在帖子中,我使用该client.writeQuery函数更新缓存,但不是在客户端更新,apollo 调用 graphql 服务器来获取新数据并更新我不使用时的缓存refetchQueries

更新 2:我检查了,我的缓存已更新,但我的 UI 没有重新渲染

0 投票
1 回答
310 浏览

graphql - 为什么我在多响应查询和同一类型的单项查询之间没有 Apollo 缓存命中?

我正在使用@vue/apollo-composableand开发一个 vue3 项目@graphql-codegen

我的索引页面执行搜索查询。该查询的每个结果在页面上都有一个磁贴。我希望缓存会回答切片查询,但相反,它们总是会错过。

在页面级别,我执行以下查询:

在我执行的 tile 组件内部:

片段如下所示:

期望:缓存将处理 tile 组件内 100% 的查询。(我希望避免将这些数据序列化到 vuex 的失败)。

现实:我收到 n+1 个后端调用。我尝试了一堆排列,包括摆脱片段。如果我发送没有数据的getToken呼叫,fetchPolicy: 'cache-only'则返回。

apollo 客户端配置非常基础:

我还附上了我的 apollo 开发工具的屏幕截图。看起来缓存实际上正在填充规范化数据:

阿波罗缓存截图

任何帮助将不胜感激!:)

0 投票
1 回答
1121 浏览

reactjs - Apollo 客户端 v3“替换 Y 对象的字段 X 时可能会丢失缓存数据”

我有两个简单的查询:

但在控制台中我看到一个警告:

有没有办法不合并它们并删除警告?因为如果指定在typePolicies

这不是我想要的,因为这些是不同的数据,这两个队列不需要以任何方式合并。另外,我没有id字段并且keyFields不适用于这种情况,因为两个菜单的标签可能相同

0 投票
1 回答
736 浏览

graphql - Apollo 客户端 - 从缓存中读取

React + Apollo 客户端应用程序。我正在尝试使用readQuery但无法读取缓存字段从我的缓存中读取。

这是一个纲要:

组件SinglePost调用useQuery执行我的GET_POST查询并缓存结果。GET_POST查询返回类型Post!。一切都很好,开发工具显示该帖子ROOT_QUERY包含一个名为getPost的字段。

SinglePost有一个DeleteButton删除点击评论的子组件。它调用useMutation和删除评论。DELETE_COMMENT查询返回类型Comment!

Post 有一个评论数组,现在我需要在缓存中更新它的数组并删除已删除的评论。我使用突变中的update函数deleteComment来获取缓存对象并readQuery从中获取getPost字段,但它返回null,即使它在开发工具中也是如此。

我怀疑当通过返回类型的突变对帖子进行突变时,Post它成功读取了getPost字段,但是当突变查询返回一个Comment类型时,它无法在其突变挂钩中读取getPost ......因为没有对Post类型的引用?

现在我正在使用refetchQueries作为一种解决方法。我不喜欢对服务器进行额外的调用,但我光滑的大脑无法弄清楚这一点。任何帮助表示赞赏。

0 投票
0 回答
80 浏览

next.js - 缓存已更新,但 UI 在删除突变 NEXTJS SSR 后更新缓存时不会更改

我正在尝试使用 SSR 在 Nextjs 中进行突变后更新缓存。我能够更新缓存,但UI 不反映对缓存的更改

在使用 getServerSideProps 获取数据时,由于服务器设置了缓存,因此无法更新 UI?

这是我更新缓存的代码。