Question

我希望在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 当我用控制台记录数据时，它实际上是在将删除的数据从阵列中过滤出来后删除了删除的数据。更新后的数据就是我写回缓存的内容

Answer 1

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

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

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

Answer 2

Apollo不仅根据query文档而且还根据使用的变量来缓存查询。换句话说，使用不同变量集的同一查询将分别缓存。调用writeQuery时，还需要通过提供要更新查询的变量来指定要更新的查询哪个。

const variables = variables: {
  location: user.location,
  office: '',
  page: 1,
  perPage: 8,
},
cache.writeQuery({
  query: GET_ROOMS_QUERY,
  data,
  variables, 
});

唯一不需要这样做的是，如果查询首先不包含变量。这也意味着您可能需要多次调用writeQuery，因为您需要更新同一查询的许多不同变体。

不难理解，必须跟踪多个查询中的变量会很快变得很麻烦。您也可以查看apollo-link-watched-mutation来解决此问题。

Answer 3

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

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

因此，这些突变可以起作用，但如果不进行更新，则一次不会更改UI。

然后cache.writeQuery可以正常工作。

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

3 个答案: