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 会更新，但是，除非我执行强制刷新，否则 UI 不会更新。

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

Answer 1

文档中描述了此行为：

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

您可以在mutate使用refetchQueries选项来强制刷新。

Answer 2

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

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

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

而且 cache.writeQuery 工作正常。