替换 Query 对象的 my 字段时可能会丢失缓存数据

Posted 2023-03-08

【中文标题】替换 Query 对象的 my 字段时可能会丢失缓存数据

【英文标题】：Cache data may be lost when replacing the my field of a Query object

【发布时间】：2020-12-04 23:30:56

【问题描述】：

这是我的代码

const NewVerificationCode = () => 
  const  loading, error, data = , refetch  = useQuery(CONFIRMATION_CODE, 
    skip: true,
    onError: (err) => ,
  );
  console.log(loading, error, data);

  if (loading || error) 
    return <ErrorLoadingHandler ... loading, error  />;
  

  return (
    <form
      onSubmit=(e) => 
        refetch();
        e.preventDefault();
      
    >
      <div>
        <button type="submit" className="signUpbutton">
          "Send the message again"
        </button>
      </div>
    </form>
  );
;

const CONFIRMATION_CODE = gql`
  query 
    my 
      sendNewTokenForConfirmation
    
  
`;

当我提出请求时，我会收到警告

替换Query对象的my字段时缓存数据可能会丢失。

要解决这个问题（这不是 Apollo Client 中的错误），要么确保 My 类型的所有 > 对象都有 ID，或者为 Query.my > 字段定义自定义合并函数，因此 InMemoryCache 可以安全地合并这些对象 现有：

    "__typename":"My","getUser"__typename":"User","email":"[e-mail]"

incoming: "__typename":"My","sendNewTokenForConfirmation":"SUCCESS"

有关这些选项的更多信息，请参阅文档：

我点击了链接。

我阅读了文档并意识到问题出在 apollo 客户端缓存（typePolicies）中。

但是我不知道该如何解决这个问题。

我应该在 typePolicies 中写什么来消除警告？

【参考方案1】：

您可能需要为 Apollo 返回一个 id，以唯一标识缓存中的该对象。 我认为这个问题与您的问题相似： link

const CONFIRMATION_CODE = gql`
  query 
    my 
      id
      sendNewTokenForConfirmation
    
  
`;

【讨论】：

如果我理解正确，我应该返回 id。我试过了，但也没有用。

【参考方案2】：

每个对象都应返回 id、_id 或自定义 id 字段 (https://www.apollographql.com/docs/react/caching/cache-configuration) 以实现自动合并功能。

const cache = new InMemoryCache(
  typePolicies: 
    Product: 
      keyFields: ["custom-id-field"],
    ,
  ,
);

(!)人们经常忘记缓存操作需要与初始查询相同的变量 (!)

突变样本（添加购买）：

update(cache,  data: NewPurchase  ) => 
  let productCache = cache.readQuery(
    query: productQuery,
    variables: 
      id: productId
    
  )
 
  cache.writeQuery(
    query: productQuery,
    variables:  id: productId ,
    data: 
      Product: 
        ...productCache.Product,
        purchases: productCache.Product.purchases.concat(NewPurchase)
      
    
  );
 ;

（重要提示：每次购买还需要返回自己的个人 ID）