meteor - Apollo graphQL 多突变乐观优化

Question

我正在使用 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 实施它的正确策略是什么？

标签： meteorgraphqlapollo