react-apollo中删除突变后如何更新UI答案

【问题标题】：How to update the UI after a delete mutation in react-apolloreact-apollo中删除突变后如何更新UI
【发布时间】：2019-09-22 00:27:41
【问题描述】：

我希望在 react apollo 组件中运行删除突变后更新我的应用程序的 UI。删除操作成功，但删除突变后 UI 没有更新。下面是我的代码副本，有什么我做错了吗？

const deleteRoom = async (roomId, client = apolloClient) => {
  const user = await getUserDetails();
  const deleteResponse = await client.mutate({
    mutation: DELETE_ROOM,
    name: 'deleteRoom',
    variables: {
      roomId,
    },
    update: (cache, { data: roomDelete }) => {
      const data = cache.readQuery({
        query: GET_ROOMS_QUERY,
        variables: {
          location: user.location,
          office: '',
          page: 1,
          perPage: 8,
        },
      });
      data.allRooms.rooms = data.allRooms.rooms.filter(
        room => room.id !== roomDelete.deleteRoom.room.id,
      );
      console.log(data, '======');
      cache.writeQuery({
        query: GET_ROOMS_QUERY,
        data,
      });
    },
  });
  return deleteResponse;
};

我预计 UI 会在执行删除突变后更新，但是，除非我执行强制刷新，否则 UI 不会更新。

N:B 当我控制台记录数据时，它实际上是在将删除的数据从阵列中过滤出来后删除了它。更新后的数据就是我写回缓存的内容

【问题讨论】：

标签： javascript reactjs react-apollo apollo-client

【解决方案1】：

文档中描述了此行为：

cache.writeQuery和client.writeQuery的区别在于客户端版本在写入缓存后也会进行广播。此广播可确保您的数据在 client.writeQuery 操作之后在视图层中刷新。如果只使用cache.writeQuery，更改可能不会立即反映在视图层中。这种行为有时在您想要执行多个缓存写入而不立即更新视图层的情况下很有用。

您可以使用mutate 中的refetchQueries 选项强制刷新。

【讨论】：

我曾尝试使用 refetchQueries 选项，但结果是一样的。
组件和查询如何“连接”？可以使用refetch 道具吗？

【解决方案2】：

确保作为“数据”进入更新的对象包括返回值并且不是空对象，因此不会更新 UI。

update: (cache, { data: roomDelete }) // 记录数据

因此，突变可以工作，但如果不向前传递数据，则不会立即更改 UI。

并且 cache.writeQuery 工作正常。

【讨论】：