Как мутировать Аполлон оптимистичные ответы? - PullRequest
0 голосов
/ 02 апреля 2019

У меня настроен React + Apollo, бэкэнд использует Django / Graphene.У меня есть мутация, чтобы создать элемент списка, оптимистичный ответ также работает хорошо для этого.У меня есть вторая мутация, которая обновляет строку сведений об этом элементе, она также работает корректно с оптимизмом.

Вопрос в том, как мне изменить оптимистический ответ создания, не дожидаясь ответа сервера?

т.е.

  1. Нажмите кнопку, чтобы создать элемент A
  2. Элемент В список добавлен оптимистичный ответ
  3. Нажмите кнопку, чтобы изменить оптимистический ответ
  4. Ошибки сервера, указывающие на то, что идентификатор из оптимистического ответа не существует

(Все, пока создание шага 1 все еще ожидает на сервере).

Запросы:

const ADD_APPOINTMENT = gql`
mutation($details: String!) {
  addAppointment(details:$details) {
    appointment{
      id
      aptType
      details
    }
  }
}
`;
const UPDATE_APPOINTMENT = gql`
  mutation($id: String!, $details: String!) {
    updateAppointment(id:$id, details:$details) {
      appointment{
        id
        details
      }
    }
  }
`;

Визуализация

const AddAppointment = () => {
  let input;

  return (
    <Mutation mutation={ADD_APPOINTMENT}>
      {(addAppointment, { data }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addAppointment({
                variables: { details: input.value },
                update: (proxy, { data: { addAppointment } }) => {
                  // Read the data from our cache for this query.
                  const data = proxy.readQuery({ query: APPOINTMENT_LIST });
                  const { appointment } = addAppointment;
                  // Add our comment from the mutation to the end.
                  data.allAppointments.push(appointment);
                  // Write our data back to the cache.
                  proxy.writeQuery({ query: APPOINTMENT_LIST, data });
                },
                optimisticResponse: {
                  __typename: "Mutation",
                  addAppointment: {
                    __typename: "Mutation",
                    appointment: {
                      id: uuid(),
                      __typename: "AppointmentType",
                      details: input.value,
                      aptType: "something",
                    }
                  }
                }
              });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Event</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};

Щекотание, которое затрагивает детали элемента.

const Tickle = ({ id, details }) => {
  const newDesc = `${details}+`;

  return (
    <Mutation mutation={UPDATE_APPOINTMENT}>
      {(updateAppointment, { data }) => (
        <div>
          <form
            onSubmit={e => {
              console.log(id, details, newDesc);
              e.preventDefault();
              updateAppointment({
                variables: { details: newDesc, id },
                optimisticResponse: {
                  __typename: "Mutation",
                  updateAppointment: {
                    __typename: "Mutation",
                    appointment: {
                      id,
                      __typename: "AppointmentType",
                      details: newDesc,
                      aptType: "something",
                    }
                  }
                }
              });
            }}
          >
            <button type="submit">Bump</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};

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

Как я могу заблокировать отправкумутации обновления до тех пор, пока не вернется созданная, но все еще продолжат оптимистически обновлять все?

В Relay была концепция ключа столкновения, которая заставляла бы мутации с тем же ключом выполняться последовательно.Я не могу найти ту же концепцию здесь.

...