Компонент Apollo Mutation с OptimisticResponse создает повторяющиеся записи до перезагрузки

При использовании OptimisticResponse в компоненте Apollo Client Mutation функция обновления вызывается дважды правильно - один раз с OptimisticResponse и один раз с данными, возвращаемыми из моей базы данных, - но повторяющиеся записи добавляются до тех пор, пока страница не будет обновлена. Это заметно, когда вы снижаете скорость сети до Медленной 3G. Повторяющиеся записи исчезают при перезагрузке страницы и не являются проблемой для высокой скорости сети.

Вот мое репо: https://github.com/cmoses8626/apollo

Ниже мой компонент Мутации. Вы заметите, что мне нужно добавить фиктивный временный идентификатор в OptimisticResponse - так что второстепенный вопрос: как я могу это обойти? Похоже на запах кода.

<Mutation
    mutation = {CREATE_RESOLUTION}
    update = {(cache, { data: { createResolution } }) => {
      const { resolutions } = cache.readQuery({ query: GET_RESOLUTIONS });
      console.info(createResolution);
      cache.writeQuery({
        query: GET_RESOLUTIONS,
        data: { resolutions: resolutions.concat([createResolution]) }
      });
    }}
  >
    {mutate => (
      <div>
        <form
          onSubmit = {e => {
            e.preventDefault();
            if (input.value) {
              mutate({
                variables: { name: input.value },
                optimisticResponse: {
                  __typename: "Mutation",
                  createResolution: {
                    __typename: "Resolution",
                    name: input.value,
                    _id: "123"
                  }
                }
              });
              input.value = "";
            }
          }}
        >
          <input
            placeholder = "Add resolution"
            ref = {node => {
              input = node;
            }}
          />
          <button type = "submit">Add</button>
        </form>
      </div>
    )}
  </Mutation>

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

Mikael Lirbank 13.09.2018 18:39

Спасибо, Микаэль. Обновлено (44 пакета!), Но все еще без изменений в повторяющихся записях до обновления страницы.

Christopher Moses 13.09.2018 19:19

Удалось ли вам решить эту проблему (я испытываю то же самое)?

TheoG 11.12.2018 19:34

@TheoG Я давно не смотрел код, но просмотрите эту ветку в Spectrum (Apollo перемещает свое сообщество из Slack), которая, кажется, отвечает на вопрос: Spectre.chat/?t=4e16ba7d-97a2-40cb-ba2f-bbd22f2228dc

Christopher Moses 14.02.2019 21:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
4
384
0

Другие вопросы по теме