如何在 Apollo 中使用乐观 UI 处理删除突变？答案

【问题标题】：How to handle delete mutations with optimistic UI in Apollo?如何在 Apollo 中使用乐观 UI 处理删除突变？
【发布时间】：2019-07-16 02:39:26
【问题描述】：

https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-mutation-options-optimisticResponse

有大量的文档和教程显示使用突变 update 和 optimisticResponse 属性涉及添加内容，但我没有看到任何涉及删除的内容。

我不确定该代码的外观。通过创建突变，您希望通过 update 将新项目添加到 Apollo 缓存中，并使用 optimisticResponse 将临时副本添加到 UI。但是对于删除，“显示”删除是没有意义的，因为它缺少数据。

这是我在 Vue 组件中的一个方法中得到的，部分正确：

async handleDelete(trackId: number) {
  const result = await this.$apollo.mutate({
    mutation: require('@/graphql/delete-tracks.gql'),
    variables: {
      ids: [trackId],
    },
    update: store => {
      const data: { getTracks: TrackList } | null = store.readQuery({
        query: getTracksQuery,
        variables: this.queryVars,
      });

      if (data && data.getTracks) {
        data.getTracks.data = data.getTracks.data.filter(
          (track: Track) => track.id !== trackId
        );
        --data.getTracks.total;
      }

      store.writeQuery({
        query: getTracksQuery,
        variables: this.queryVars,
        data,
      });
    },
    optimisticResponse: {},
  });

  console.log('result:', result);
},

我发现我基本上需要从 Apollo 缓存中删除已删除的项目，而这部分似乎工作得很好。虽然视觉移除不会立即发生，因为没有optimisticResponse。那是我完全不知道如何写作的部分。

【问题讨论】：

标签： javascript vue.js graphql apollo vue-apollo

【解决方案1】：

知道了，它比我想象的要简单得多。我只是不太明白optimisticResponse 是如何与update 发挥作用的。

optimisticResponse: {
  __typename: 'Mutation',
  deleteTracks: [trackId],
},

因此update 方法将从optimisticResponse 获取此结果并从缓存中删除该轨道ID。 update 将被 GraphQL 服务器响应第二次调用，并且 Apollo 缓存将被协调。

【讨论】：