如何在react-apollo中发生删除突变后更新UI

Question

我希望我的应用程序的UI在react apollo组件中运行删除变异后进行更新。删除操作成功，但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会在执行delete变异后更新，然而，除非我执行强制刷新，否则UI不会更新。

N:B当我通过控制台记录数据时，它实际上是在将删除的数据从数组中筛选出来之后将其删除。更新后的数据就是我写回缓存的数据

Answer 1

文档中对此行为进行了描述：

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

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

Answer 2

确保要作为"data“进行更新的对象包含返回值，并且不是空对象，因此不会更新UI。

update: (cache, { data: roomDelete }) //日志数据

因此，变化可以工作，但UI不会立即更改，而更新不会向前传递数据。

而且cache.writeQuery运行得很好。