在 Apollo-client 中，writeQuery 会更新缓存，但 UI 组件不会重新渲染

Posted 2023-03-08

【中文标题】在 Apollo-client 中，writeQuery 会更新缓存，但 UI 组件不会重新渲染

【英文标题】：In Apollo-client the writeQuery updates the cache but the UI components do not rerender

【发布时间】：2020-10-14 15:48:01

【问题描述】：

我已完全按照 Apollo 客户端 2.6 的文档进行操作。自 2018 年以来，似乎网上的人们似乎都遇到了这个问题。我错过了什么吗？文档应该更新，这不起作用，很明显它不适用于这么多人。

成功写入缓存后，如何更新我的 UI。这应该开箱即用。这是一个创建突变，我在addleo突变中添加了一条记录，之后我想在所有记录的列表中显示添加的记录，即LIST LEOS：

const ADD_LEO = gql`
mutation AddLeo($text: String!, $userId: String!)
  addLeo(text: $text, userId: $userId) 
    id
    text
    userId
    

`;

 const LISTLEOS = gql`
query LISTLEOS 
  ListLeos 
    id
    text
    userId
  

`;

  const [addleo,  loading, error ] = useMutation
      (
          ADDLEO,
          
            update(cache, data: addleo)
                const  ListLeos  = cache.readQuery( query: LISTLEOS);
                cache.writeQuery(
                    query: LISTLEOS,
                    data:  ROOT_QUERY: ListLeos.concat([addleo]),
                ); 
            
           
      );

以上内容应该会导致与LISTLEOS 关联的组件重新呈现，但事实并非如此。请帮忙。

【问题讨论】：

提供了错误的语法/错误的数据......首先要确保你做的事情是正确的

【参考方案1】：

无需使用ROOT_QUERY 作为密钥。传递给writeQuery 的data 选项应该看起来就像您的服务器返回的data：

cache.writeQuery(
  query: LISTLEOS,
  data:  ListLeos: ListLeos.concat([addleo]),
);