基于Meteor的Apollo v.2客户端批量Mutation乐观UI优化咨询

我正在开发基于Meteor和Apollo v2客户端的应用，里面有个商品列表功能——点击“-”按钮就能把商品标记为忽略，移到另一列表，订单数据是通过ORDERS订阅获取的。

我给这个功能加了乐观UI，但快速点击按钮时，商品会出现跳变的情况。我猜是因为每次修改都发独立请求，本地的乐观变更被服务端返回的版本给覆盖了。

相关代码如下：

toggleItemIgnore(item) { 
  const { toggleItemIgnore, resetShipmentAndWeight, order } = this.props; 
  toggleItemIgnore({ 
    variables: { itemId: item._id }, 
    optimisticResponse: { 
      __typename: 'Mutation', 
      toggleItemIgnore: { ...item, isIgnored: !item.isIgnored } 
    }, 
    update: (proxy, { data: { toggleItemIgnore } }) => { 
      const updatedItem = toggleItemIgnore; 
      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里该怎么正确做这个策略？

针对你遇到的问题，咱们可以从两个核心方向入手解决：一是让Apollo自动批量发送请求，二是优化本地乐观更新的逻辑，避免被服务端响应频繁覆盖。

1. 启用Apollo的批量请求（Batch HTTP Link） #

首先，Apollo Client自带了批量请求的能力，通过batchHttpLink可以把短时间内的多个Mutation请求合并成一个批量请求发送到服务端，这样能减少请求数量，也降低了乐观更新被反复覆盖的概率。

配置步骤： #

• 先装依赖（没装过的话）：

  npm install @apollo/client apollo-link-batch-http
  

• 修改Apollo Client的链接配置，把原来的普通HTTP链接换成批量链接，或者把批量链接加入到链接链里：

  import { ApolloClient, InMemoryCache, createBatchHttpLink } from '@apollo/client';
  import { setContext } from '@apollo/client/link/context';
  
  // 创建批量链接，设置收集请求的时间窗口和单次批量最大请求数
  const batchLink = createBatchHttpLink({
    uri: '/graphql', // 替换成你的GraphQL接口地址
    batchMax: 10, // 一次最多打包10个请求
    batchInterval: 200, // 等待200ms，收集这段时间内的所有请求再发送
  });
  
  // 如果需要加身份验证之类的header，用setContext处理
  const authLink = setContext((_, { headers }) => {
    const token = localStorage.getItem('authToken');
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : '',
      }
    };
  });
  
  // 初始化客户端，把auth链和批量链结合起来
  const client = new ApolloClient({
    link: authLink.concat(batchLink),
    cache: new InMemoryCache(),
  });
  

这样设置后，Apollo会自动在200ms的窗口内收集所有触发的Mutation，打包成一个请求发送。服务端处理完后批量返回结果，不会再出现短时间内多个请求互相干扰的情况。

2. 优化乐观更新逻辑，让本地状态优先 #

你现在的update函数是等服务端返回结果后再更新缓存，但乐观UI的核心是本地先改，再等服务端同步。咱们可以调整逻辑，直接用本地计算的乐观状态来更新缓存，而不是依赖服务端返回的数据。

修改后的代码示例：

toggleItemIgnore(item) { 
  const { toggleItemIgnore, order } = this.props; 
  // 先在本地计算好要更新的商品状态，一定要带上__typename，Apollo缓存靠这个识别类型
  const updatedItem = {
    ...item,
    __typename: item.__typename,
    isIgnored: !item.isIgnored
  };

  toggleItemIgnore({ 
    variables: { itemId: item._id }, 
    optimisticResponse: { 
      __typename: 'Mutation', 
      toggleItemIgnore: updatedItem 
    }, 
    update: (proxy) => { 
      const orderQuery = { query: ORDER_QUERY, variables: { _id: order._id } }; 
      const query = proxy.readQuery(orderQuery); 
      // 直接用本地的updatedItem更新缓存，不用等服务端返回
      const resultItems = query.order.items.map(i => 
        i._id === updatedItem._id ? updatedItem : i
      );
      const result = { 
        ...query, 
        order: { ...query.order, items: resultItems } 
      }; 
      proxy.writeQuery({...orderQuery, data: result}); 
    },
    // 可选：如果服务端返回的状态和本地乐观更新不一致，在这里做最终同步
    onCompleted: (data) => {
      const serverItem = data.toggleItemIgnore;
      const orderQuery = { query: ORDER_QUERY, variables: { _id: order._id } };
      const query = proxy.readQuery(orderQuery);
      const resultItems = query.order.items.map(i => 
        i._id === serverItem._id ? serverItem : i
      );
      proxy.writeQuery({...orderQuery, data: { ...query, order: { ...query.order, items: resultItems } }});
    }
  }) 
}

这样每次点击按钮，本地缓存会立即更新，用户能马上看到状态变化；而批量请求会把多个变更一起发给服务端，即使服务端返回结果，也只会做一次最终同步，不会频繁覆盖本地状态，跳变问题自然就解决了。

3. 进阶方案：手动累积变更，批量提交 #

如果上面的自动批量还满足不了你的需求，你可以手动在本地收集用户的操作，等用户停止操作一段时间后，再一次性发送批量请求——当然这个需要服务端支持批量修改的接口。

大致思路：

• 在组件里维护一个集合，记录用户点击过的商品ID
• 用防抖函数（比如lodash的debounce），等用户停止点击200ms后，触发批量更新
• 批量Mutation的乐观Response可以一次性更新所有相关商品的状态

示例代码：

import { debounce } from 'lodash';

class YourProductList extends React.Component {
  constructor(props) {
    super(props);
    this.pendingItemIds = new Set(); // 用Set避免重复添加同一个商品
    // 防抖函数，200ms内多次触发只会执行最后一次
    this.batchUpdate = debounce(this._batchUpdate.bind(this), 200);
  }

  toggleItemIgnore(item) {
    // 第一步：先本地更新缓存（乐观更新）
    const { order, client } = this.props;
    const updatedItem = { ...item, isIgnored: !item.isIgnored, __typename: item.__typename };
    const orderQuery = { query: ORDER_QUERY, variables: { _id: order._id } };
    const query = client.readQuery(orderQuery);
    const resultItems = query.order.items.map(i => 
      i._id === updatedItem._id ? updatedItem : i
    );
    client.writeQuery({...orderQuery, data: { ...query, order: { ...query.order, items: resultItems } }});

    // 第二步：把商品ID加入待处理队列
    this.pendingItemIds.add(item._id);
    // 触发批量更新
    this.batchUpdate();
  }

  _batchUpdate() {
    const itemIds = Array.from(this.pendingItemIds);
    this.pendingItemIds.clear();

    // 调用服务端的批量修改接口（需要后端配合实现）
    this.props.batchToggleItemIgnore({
      variables: { itemIds },
      optimisticResponse: {
        __typename: 'Mutation',
        batchToggleItemIgnore: itemIds.map(id => {
          const originalItem = this.props.order.items.find(i => i._id === id);
          return {
            _id: id,
            isIgnored: !originalItem.isIgnored,
            __typename: 'Item'
          };
        })
      }
    });
  }
}

这种方式完全由你控制请求发送的时机，能彻底解决快速点击导致的状态跳变，不过需要后端支持批量修改的接口，适合对交互体验要求很高的场景。

内容的提问来源于stack exchange，提问作者Nikolay Aleshkovskiy