Apollo graphQL оптимизация множественных мутаций - PullRequest
Новая
       27

Apollo graphQL оптимизация множественных мутаций

0 голосов
/ 31 мая 2018

Я работаю над приложением с клиентом 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?

...