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

Posted 2023-03-08

【中文标题】如何在 Apollo 中使用乐观 UI 处理删除突变？

【英文标题】：How to handle delete mutations with optimistic UI in Apollo?

【发布时间】：2019-07-16 02:39:26

【问题描述】：

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

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

我不确定该代码的外观。通过创建突变，您希望通过 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】：

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

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

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