У меня настроен React + Apollo, бэкэнд использует Django / Graphene.У меня есть мутация, чтобы создать элемент списка, оптимистичный ответ также работает хорошо для этого.У меня есть вторая мутация, которая обновляет строку сведений об этом элементе, она также работает корректно с оптимизмом.
Вопрос в том, как мне изменить оптимистический ответ создания, не дожидаясь ответа сервера?
т.е.
- Нажмите кнопку, чтобы создать элемент A
- Элемент В список добавлен оптимистичный ответ
- Нажмите кнопку, чтобы изменить оптимистический ответ
- Ошибки сервера, указывающие на то, что идентификатор из оптимистического ответа не существует
(Все, пока создание шага 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 была концепция ключа столкновения, которая заставляла бы мутации с тем же ключом выполняться последовательно.Я не могу найти ту же концепцию здесь.