2

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

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

我不确定该代码的外观。通过创建突变，您希望通过 将新项目添加到 Apollo 缓存中，update并使用optimisticResponse. 但是对于删除，“显示”删除是没有意义的，因为它没有数据。

这是我在 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. 那是我完全不知道如何写作的部分。

4

1 回答 1

0

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

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

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

于 2019-02-22T14:20:34.667 回答