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

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

0 голосов
/ 03 сентября 2018

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

.

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

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

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

Check => Uncheck => Check

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

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

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

1 Ответ

0 голосов
/ 06 сентября 2018

Возможно, есть лучшие варианты, но вот 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 как взломанный вариант.

...