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

时间:2019-02-22 03:34:04

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

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

有许多文档和教程显示了使用突变updateoptimisticResponse属性涉及添加事物的用法,但我还没有看到涉及删除的任何信息。

我不确定该代码的外观。使用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,但视觉移除并不会立即发生。那是我绝对不知道如何写作的部分。

1 个答案:

答案 0 :(得分:0)

知道了,它比我想象的要简单得多。我只是不太了解optimisticResponseupdate的关系。

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

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