在 Apollo 客户端上更新缓存答案

【问题标题】：Updating cache on Apollo Client在 Apollo 客户端上更新缓存
【发布时间】：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。

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

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

solution

【讨论】：