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 工作正常。