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

有大量的文档和教程显示了涉及添加内容的变异

update

和

optimisticResponse

属性的使用，但我没有看到任何涉及删除的内容

我不确定代码应该是什么样子。使用create mutation，您希望通过

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

是如何与

update

一起发挥作用的

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

---

因此，

update

方法将从

optimisticResponse

中获取该结果，并从缓存中删除该曲目ID<代码>更新将通过GraphQL服务器响应第二次调用，Apollo缓存将得到协调。

明白了，这比我想象的要简单得多。我只是不太明白

optimisticResponse

是如何与

update

一起发挥作用的

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

因此，

update

方法将从

optimisticResponse

中获取该结果，并从缓存中删除该曲目ID<代码>更新将使用GraphQL服务器响应第二次调用，Apollo缓存将得到协调