我正在开发一个基于GraphQL/Apollo/Reaction的网络. 所以我想使用Mutation来发出POST请求,当完成时,我清理了一些针对某些查询的缓存.我读了Apollo的doc,它指导我如何从缓存和写操作中读取数据. 但我有三个问题:

  1. 我可以用一个客户端.ReadQuery调用读取多个查询缓存吗?如果答案是否定的,那么ReQuery是否同步执行?
  2. 如何在读取后清除查询缓存(而不是更新)?
  3. 查询的缓存更新或重新获取(Refetch In UseMutation)是否会强制重新呈现调用该查询的所有组件?

我的样例代码如下:

 import type {DataProxy, FetchResult} from 'react-apollo'
 import {useMutation} from '@apollo/react-hooks'
  
 const[theMutationQuery] =  useMutation(MUTATIONQUERY, {
   refetchQueries: [somequery expression] // will the force a rerender of all components that use 'somequery'
   onCompleted: () => {},
   onError: () => {},
   update: (store: DataProxy, data: FetchResult<?*>) => { 
      const cacheDataForOtherQuery = store.readQuery({
           query: GETQUERY1
           variables: { 
              v: "str",
           },
           // so can i add one more query here?
     }) 
     // then how should I clean up the result from readquery, that is, cacheDataForQuery. Also, after cleaning up, will this force a rerender of all components using the query(GETQUERY1 here)
   }
 });
 

推荐答案

  1. 我可以用一个客户端.ReadQuery调用读取多个查询缓存吗? 不能,您不能用一个client.readQuery()调用来读取多个查询的缓存.您需要多次调用client.readQuery(),对于要从缓存中读取的每个查询都需要调用一次.

  2. 如果答案是否定的,那么ReQuery是否同步执行? 是的,client.readQuery()同步执行.它立即从缓存中读取查询数据并将其返回.

  3. 如何在读取后清除查询缓存(而不是更新)? 要清除特定查询的缓存,可以使用client.evict()方法.此方法接受一个Options对象,该对象具有一个Query属性,该属性应该是表示要驱逐的查询的GraphQL文档.此方法将从缓存中删除查询及其数据.

    客户端.evit({ 查询:GETQUERY1, 变量:{v:"str"} );

  4. 查询的缓存更新或重新获取(Refetch In UseMutation)是否会强制重新呈现调用该查询的所有组件? 是的,当您更新或重新提取查询时,将重新呈现使用该查询的所有组件以反映更新的数据.这是因为Apollo客户端将通知这些组件它们正在使用的数据已更改,并且它们将相应地更新其状态.

关于您的示例代码,通过使用更新函数,您可以操作存储的缓存,可以使用它来更新特定的查询数据,还可以像读取查询数据一样使用它来读取查询数据,然后使用该数据更新或清除其他查询.Mutations 配置中的refetchQueries选项用于在Mutations 完成后重新获取一组查询.请记住,重新获取查询将导致使用该查询的所有组件重新呈现并反映新数据.

Reactjs相关问答推荐

Shadck/ui Select -当用户 Select 项目时更改状态

在带有和设计的表格中禁用和取消选中复选框

下拉Tailwind CSS菜单与怪异beviour

如何使数据库数据在第一次呈现时显示?

有没有一种惯用的方式来接受特定的子元素?

使用`Link`包装`tr`标记会在Next.js中产生水合错误14

如何通过回调函数获取多个值?

React:关于useEffect钩子如何工作的困惑

是否为Reaction中未使用的组件生成Tailwincss样式?

useEffect firebase 清理功能如何工作?

如何更新 FunctionComponentElement 的 props

ReactJS on AWS Amplify与EC2上的Spring boot服务之间的混合内容错误

无法使axiosmockadapter正常工作

React - 使用 useEffect 还是直接在 onChange 方法中更改值对性能最好?

Stripe Checkout:是否可以创建不自动续订的订阅?

导入样式化组件时未导入组件内容

Cypress - 替换 React 项目中的变量

当父组件重新渲染时做出react ,我失go 了子状态.我错过了什么?

React LinkProps 的含义

Select MenuItem 时 Material-ui 不更改样式