如何从GraphQL/Apollo缓存中清除多个查询?

huangapple go评论89阅读模式
英文:

how to clean multiple queries from cache in graphql/apollo

问题

我正在开发一个基于GraphQL/Apollo/React的Web应用程序。因此,我想要使用useMutation来进行POST请求,当完成后,我需要清理一些属于某些查询的缓存。我阅读了Apollo的文档,并且它指导我们使用readQuery从缓存中读取和使用writeQuery来写入。但我有三个问题:

  1. 我可以使用一个client.readQuery调用来读取多个查询的缓存吗?如果答案是否定的,readQuery是否同步执行?
  2. 如何在读取查询后清除查询缓存(而不是更新)?
  3. 缓存的更新或查询的重新获取(在useMutation中重新获取)是否会强制重新渲染调用该查询的所有组件?

我的示例代码:

import type { DataProxy, FetchResult } from 'react-apollo';
import { useMutation } from '@apollo/react-hooks';

const [theMutationQuery] = useMutation(MUTATIONQUERY, {
  refetchQueries: [somequery expression] // 这是否会强制重新渲染使用'somequery'的所有组件?
  onCompleted: () => {},
  onError: () => {},
  update: (store: DataProxy, data: FetchResult<?*>) => {
    const cacheDataForOtherQuery = store.readQuery({
      query: GETQUERY1,
      variables: {
        v: "str",
      },
      // 那么我可以在这里添加更多查询吗?
    });
    // 然后我应该如何清理readQuery的结果,即cacheDataForQuery。此外,在清理后,这是否会强制重新渲染使用查询的所有组件(这里是GETQUERY1)?
  }
});
英文:

I am working on a web based on graphql/apollo/react.
So I want to useMutation to make post request, and when completed, I clean up some caches that belows to some queries. I read the doc of apollo, and it guide use to readquery from cache and writequery.
But I have three questions:

  1. Can I read multiple queries cache with one client.readquery call? If the answer is no, does readquery execute synchronously?
  2. How to clean the query cache (not update) after read them?
  3. will the cache update or refetch(refetch in useMutation) of a query force a re-render of all the components that call the query?

my sample code:

 import type {DataProxy, FetchResult} from &#39;react-apollo&#39;
 import {useMutation} from &#39;@apollo/react-hooks&#39;
  
 const[theMutationQuery] =  useMutation(MUTATIONQUERY, {
   refetchQueries: [somequery expression] // will the force a rerender of all components that use &#39;somequery&#39;
   onCompleted: () =&gt; {},
   onError: () =&gt; {},
   update: (store: DataProxy, data: FetchResult&lt;?*&gt;) =&gt; { 
      const cacheDataForOtherQuery = store.readQuery({
           query: GETQUERY1
           variables: { 
              v: &quot;str&quot;,
           },
           // 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

得分: 1

  1. 不能使用一个 client.readQuery() 调用来读取多个查询的缓存。您需要多次调用 client.readQuery(),每次为您想从缓存中读取的查询调用一次。

  2. 如果答案是不可以,readQuery 是否同步执行?
    是的,client.readQuery() 是同步执行的。它会立即从缓存中读取查询数据并返回它。

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

client.evict({
    query: GETQUERY1,
    variables: { v: "str" }
});
  1. 缓存的更新或查询(在 useMutation 中的 refetch)是否会强制重新渲染调用查询的所有组件?
    是的,当您更新或查询一个查询时,所有使用该查询的组件都将重新渲染,以反映更新后的数据。这是因为 Apollo 客户端会通知这些组件它们正在使用的数据已更改,它们将相应地更新其状态。

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

英文:
  1. Can I read multiple queries cache with one client.readquery call?
    No, you cannot read multiple queries' cache with one client.readQuery() call. You need to call client.readQuery() multiple times, once for each query you want to read from the cache.

  2. If the answer is no, does readquery execute synchronously?
    Yes, client.readQuery() executes synchronously. It immediately reads the query data from the cache and returns it.

  3. How to clean the query cache (not update) after read them?
    To clean the cache for a specific query, you can use the client.evict() method. This method takes in a options object with a query property that should be the GraphQL document representing the query you want to evict. This method will remove the query and it's data from the cache.

    client.evict({
    query: GETQUERY1,
    variables: { v: "str" }
    });

  4. will the cache update or refetch(refetch in useMutation) of a query force a re-render of all the components that call the query?
    Yes, when you update or refetch a query, all the components that are using that query will be re-rendered to reflect the updated data. This is because the Apollo client will notify those components that the data they are using has changed, and they will update their state accordingly.

Regarding your sample code, by using the update function you can manipulate the store's cache, you can use it to update a specific query data, but also you can use it as you did to read a query data and then use the data to update or clean other queries. The refetchQueries option in the mutation configuration is used to refetch a set of queries after a mutation is completed. Keep in mind that refetching a query will cause all components that are using that query to re-render and reflect the new data.

huangapple
  • 本文由 发表于 2023年1月6日 12:49:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/75027034.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定