在 Apollo 客户端上更新缓存

Posted 2023-03-08

【中文标题】在 Apollo 客户端上更新缓存

【英文标题】：Updating cache on Apollo Client

【发布时间】：2019-04-02 09:27:18

【问题描述】：

我正在使用 Apollo Dev Tools for Chrome，但我似乎无法理解如何更新缓存。

每次查询后缓存都是相同的，即使它呈现的是正确的数据。

我正在开发一个 CRUD 应用程序，在删除时我希望页面显示在服务器上所做的更改。在执行删除数据库中的项目的突变后，我还想从缓存中删除该项目。

// mutation
const DELETE_ELEMENT_MUTATION = gql`
  mutation DELETE_ELEMENT_MUTATION($id: String!) 
    deleteElement(id: $id)
  
`;

// update cache
update = (cache, payload) => 
  const data = cache.readQuery(query: queryAllElements);
  const result = data.allElements.filter(element => 
    const elementId = script._id;
    const compareId = JSON.parse(payload.data.deleteElement).id;

    return elementId !== compareId;
  );

  cache.writeQuery(query: queryAllElements, data: result);
;

<Mutation
  mutation=DELETE_ELEMENT_MUTATION
  variables=id: id
  update=this.update
>
  (deleteElement) => (
    <Icon
      onClick=() => 
        deleteElement();
      
    />
  )
</Mutation>

更新后缓存没有更新。

编辑：更改

cache.writeQuery(query: getAllElements, data: result); 
// to 
cache.writeQuery(query: queryAllElements, data: result);

【问题讨论】：

github.com/apollographql/apollo-client/issues/3909

我会尝试做问题中描述的事情。同时，在我写问题时，我认为 是 的返回并不重要，我认为这可能是导致问题的原因？

您的读取查询正在使用“queryAllElements”，而您的写入查询正在使用“getAllElements”

我的错，我在将代码缩小到最小的有意义的例子时无意中这样做了。两行都是 queryAllElements。

【参考方案1】：

我解决了这个问题。原来我在缓存中更新了错误的键。

solution