javascript - Apollo 客户端写入查询不更新 UI

Question

我们正在使用 Apollo Client 构建一个离线的第一个 React Native 应用程序。目前我正在尝试在离线时直接更新 Apollo Cache 以乐观地更新 UI。由于我们处于离线状态，因此在连接处于“在线”状态之前，我们不会尝试触发突变，但希望 UI 在仍处于离线状态时触发突变之前反射(reflect)这些更改。我们正在使用 http://dev.apollodata.com/core/read-and-write.html#writequery-and-writefragment 中的 readQuery/writeQuery API 函数.并且能够通过 Reacotron 查看正在更新的缓存，但是，UI 不会随着此缓存更新的结果而更新。

    const newItemQuantity = existingItemQty + 1;
    const data = this.props.client.readQuery({ query: getCart, variables: { referenceNumber: this.props.activeCartId } });
    data.cart.items[itemIndex].quantity = newItemQuantity;
    this.props.client.writeQuery({ query: getCart, data });

Answer 1

如果您查看文档示例，您会发现它们以不可变的方式使用数据。传递给写入查询的数据属性与读取的数据属性不是同一个对象。 Apollo 不太可能支持更改此对象，因为如果不对之前/之后的数据进行深度复制和比较，它就无法非常有效地检测您修改了哪些属性。

const query = gql`
  query MyTodoAppQuery {
    todos {
      id
      text
      completed
    }
  }
`;
const data = client.readQuery({ query });
const myNewTodo = {
  id: '6',
  text: 'Start using Apollo Client.',
  completed: false,
};
client.writeQuery({
  query,
  data: {
    todos: [...data.todos, myNewTodo],
  },
});

所以你应该在不改变数据的情况下尝试相同的代码。例如，您可以使用 lodash/fp 的 set 来帮助您

const data = client.readQuery({...});
const newData = set("cart.items["+itemIndex+"].quantity",newItemQuantity,data);
this.props.client.writeQuery({ ..., data: newData });

推荐ImmerJS对于更复杂的突变