如何在 Apollo 中使用 optimistic UI 处理 delete 突变？

Question

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

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

我不确定代码应该是什么样子。使用 create mutation，您希望通过 update 将新项目添加到 Apollo 缓存，并使用 optimisticResponse 将临时副本添加到 UI。但是对于删除，"show" 删除没有意义，因为它缺少数据。

这是我在 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 缓存。

如何在 Apollo 中使用 optimistic UI 处理 delete 突变？

How to handle delete mutations with optimistic UI in Apollo?

javascript

apollo

vue.js

graphql

vue-apollo