代码之家 › 专栏 › 技术社区 › ffxsam

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

vue-apollo apollo graphql vue.js javascript

0

ffxsam · 技术社区 · 6 年前

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

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

我不确定代码应该是什么样子。使用create变异,您希望通过 更新 并使用 乐观的反应 . 但是对于删除,由于缺少数据,“显示”删除是没有意义的。

这是我在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);
},

乐观的反应 . 这就是我完全不知道该怎么写的部分。

0 回复 | 直到 6 年前

1

0

ffxsam 6 年前

明白了,比我想象的简单多了。我只是不太明白 optimisticResponse update

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

所以方法将从 乐观的反应 并从缓存中删除该磁道ID。 更新 将使用GraphQL服务器响应再次调用,并且Apollo缓存将被协调。