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

Question

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

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

我不确定代码应该是什么样子。对于 create 突变，您希望通过 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。这是我完全不知道如何着手写作的部分。

Answer 1

明白了，比我想象的简单多了。我只是不太明白 optimisticResponse 如何与 update 一起发挥作用。

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

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