response-apollo subscribeToMore(previous, subscriptionData) предыдущий фактически не является предыдущим. Те же данные, что и новые входящие данные

Question

Я пытаюсь заставить индикаторы выполнения для пользовательских действий синхронизироваться должным образом со скоростью, с которой сервер может их обработать. Очевидно, что у людей будет небольшая задержка, и я не могу просто предположить, что все одинаковы, и оставить это с фиксированной скоростью. Поэтому я решил просто запустить его в течение 6 секунд (фактическое время действий, без учета задержки), и всякий раз, когда пользователь переходит к следующему действию и снижению его выносливости, он обновляет индикатор выполнения, чтобы начать снова.

Просто для того, чтобы создать образ того, что я делаю: индикатор выполнения перемещается с 0% до 100%, останавливается, и когда начинается следующее действие пользователя, он устанавливается на 0% и снова заполняется через 6 секунд.

Я могу установить setState или подпрограмму внутри, и она будет обновляться каждые 20 миллисекунд, как фактический индикатор выполнения, и вызывать невыносимое отставание, а индикатор выполнения очень нервный.

Моей последней идеей решения было проверить, действительно ли отличались предыдущее состояние и текущее обновление, прежде чем пытаться сбросить индикатор выполнения.

Таким образом, кажется, что предыдущее состояние, которое возвращается, фактически совпадает с "новым" состоянием, которое возвращается при обновлении. Поэтому мне интересно, как вы можете запустить проверку, которая позволит мне сравнить предыдущую отправку с новой подпиской?

Я был бы признателен, если бы кто-то мог помочь или предложить другую (возможно, лучшую!) Альтернативу этой шкале прогресса. Я просто предполагаю, что это один из единственных способов сделать это, кроме создания подписки на сам индикатор выполнения и заставить сервер отправлять ему данные каждые 20 мс, что кажется ужасным по производительности... но я не очень хорошо образован в этом.

before render

  startLoadBar = () => {
    this.timer = setInterval(this.progress, 20);
  };

  progress = () => {
    let elem = document.getElementById("userBar");
    let { progress_bar, updateProgerss } = this.props

    if (100 <= progress_bar) {
      clearInterval(this.timer);
    } else {
      let width = progress_bar + 100 / 300;
      updateProgress(width);
    }
  };  

Внутри заявления о возврате:

  <Query query={STAMINA_FETCH}>
                  {({ subscribeToMore, data, loading, error }) => {
                    if (loading) return <Loader />;
                    if (error) return <p>{/**@todo error*/}</p>;
                    if (!subscribe) {
                      subscribe = subscribeToMore({
                        document: staminaChanged,
                        updateQuery: (prev, { subscriptionData }) => {
                          if (!subscriptionData.data) return prev;
                          const { staminaChanged } = subscriptionData.data;
                          console.log("prev " + JSON.stringify(prev));
                          console.log("staminaChanged " + JSON.stringify(staminaChanged.stamina));
                          if (prev.FETCH_STAMINA.stamina !== staminaChanged.stamina) { //// does nothing since both are exactly the same!
                            this.props.updateProgress(0);
                            this.startLoadBar();
                          }
                          return {
                            ...prev,
                            FETCH_STAMINA: staminaChanged,
                          };
                        }
                      });
                    }