Apollo graphQL多重突变乐观优化

时间:2018-05-31 13:50:23

标签: meteor graphql apollo

我正在使用Meteor和Apollo v.2客户端开发应用程序。

该应用有一个项目列表。可以忽略每个项目并将其移动到另一个列表。 ORDERS订阅收到包含商品的订单。

我刚为它添加了一个乐观的用户界面,但效果不好。

我希望它可以立即将所有需要的项目移动到相应的部分。但是当我在-按钮上点击太快时,例如项目开始跳转(我怀疑这是因为我的所有更改都作为单独的请求发送,并且本地乐观更改会被服务器端版本重写)。

Items list

这是一个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实施它的正确策略是什么?

0 个答案:

没有答案