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

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

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

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

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

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

<Mutation
    mutation={CREATE_RESOLUTION}
    update={(cache, { data: { createResolution } }) => {
      const { resolutions } = cache.readQuery({ query: GET_RESOLUTIONS });
      console.log(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>
...