Реагируйте на мутацию apollo и оптимистичные обновления

Question

Я использую graphql HOC с мутацией для типа ввода checkbox, Я также добавил оптимистический вариант обновления пользовательского интерфейса к нему. Установка флажка приведет к мутации с value=true и снятие галочки вызовет мутацию с value=false,

Но проблема в том, что быстрое нажатие приводит к нескольким мутационным вызовам на сервер, и в ответах возникает задержка. между тем optimisticResponse Обновление делает свою работу и переключает флажок. Когда приходит ответ от сервера, функция обновления вызывается снова, и это переключает флажок, приводящий к сбою в пользовательском интерфейсе.

Позвольте мне суммировать поток, который я мог предвидеть

Порядок кликов:

Check => Uncheck => Check

Порядок обновления пользовательского интерфейса:

Check(optimistic response) => Uncheck(optimistic response) => Check(server response) => Check(Optimistic response) => Uncheck(server response) => Check(server response)

Есть ли способ убрать эти глюки?

Answer 1

Там могут быть лучшие варианты, но вот 2, которые я придумал:

1) Измените значение разрыва =true и значение =false на отдельные функции. Таким образом, и ваш оптимистичный ответ, и функция истинного обновления выполняют одну и ту же операцию. Они оба назовут значение = истина или значение = ложь.

2) Для вашего оптимистического ответа вы можете добавить дополнительный параметр optimistic=true. Затем в вашей функции обновления вы можете проверить, верен ли оптимистический ответ. Если это так, продолжайте и сделайте обновление. После этой проверки вы можете проверить ответ мутации. Если мутация возвращает ошибку, установите значение обратно. Если это не возвращает ошибку, ничего не делайте.

if(optimistic) {
  setValue(); // Sets it to optimistic result
  return;
}
if(response returns error) {
  setValue(); // Returns it back to original state
  return
}

На мой взгляд, лучше выбрать 1, но если это невозможно, вы можете использовать 2 как взломанный вариант.