我正在使用Meteor和Apollo v.2客户端开发应用程序。
该应用有一个项目列表。可以忽略每个项目并将其移动到另一个列表。 ORDERS订阅收到包含商品的订单。
我刚为它添加了一个乐观的用户界面,但效果不好。
我希望它可以立即将所有需要的项目移动到相应的部分。但是当我在-
按钮上点击太快时,例如项目开始跳转(我怀疑这是因为我的所有更改都作为单独的请求发送,并且本地乐观更改会被服务器端版本重写)。
这是一个gif演示 - http://www.giphy.com/gifs/w8f2lp51GuRFVRVnNM
toogleItemIgnore(item) {
const { toggleItemIgnore, resetShipmentAndWeight, order } = this.props;
toggleItemIgnore({
variables: { itemId: item._id },
optimisticResponse: {
__typename: 'Mutation',
toogleItemIgnore: {
...item,
isIgnored: !item.isIgnored
}
},
update: (proxy, { data: { toogleItemIgnore } }) => {
const updatedItem = toogleItemIgnore;
const orderQuery = {
query: ORDER_QUERY,
variables: {
_id: order._id
}
};
const query = proxy.readQuery(orderQuery);
const resultItems = [...query.order.items.filter(item => item._id !== updatedItem._id), updatedItem];
const result = {
...query,
order: {
...query.order,
items: resultItems
}
};
proxy.writeQuery({...orderQuery, data: result});
}
})
似乎我需要以某种方式优化我的查询和突变。因此,所有突变都在本地(乐观)工作,然后我将一批突变发送到服务器并立即更新所有项目。
使用Apollo实施它的正确策略是什么?