Я использую <Mutation /> компонент с API Render Prop и пытаюсь выполнить оптимистический ответ в пользовательском интерфейсе.
Пока у меня есть этот блок в функции _onSubmit -
createApp({
variables: { id: uuid(), name, link },
optimisticResponse: {
__typename: "Mutation",
createApp: {
__typename: "App",
id: negativeRandom(),
name,
link
}
}
});
И мой <Mutation /> компонент выглядит так -
<Mutation
mutation={CREATE_APP}
update={(cache, { data: { createApp } }) => {
const data = cache.readQuery({ query: LIST_APPS });
if (typeof createApp.id == "number") {
data.listApps.items.push(createApp);
cache.writeQuery({
query: LIST_APPS,
data
});
}
}}
>
{/*
some code here
*/}
</Mutation>
Я знаю, что функция update в <Mutation /> запускается дважды, один раз при запуске optimisticResponse и второй раз, когда ответ сервера возвращается.
В первый раз я даю им id как number.Оформить заказ createApp в optimisticResponse, где id: negativeRandom()
Вот почему моя update опора в <Mutation /> компоненте проверяет, является ли createApp.id значением number, затем вставляет его в массив.Это означает, что если данные возвращаются из локального хранилища, то помещают их в локальный кеш, а при возврате с сервера - не отправляют.
Но происходит то, что данные отображаются только при возврате с сервера.Функция update запускается дважды, но она не помещает ее в массив.
Я думаю, что может возникнуть 3 проблемы -
Либо функция update не выполняетзапускается при нажатии локального состояния
Я пытался сделать fetchPolicy равным cache-and-network & cache-first, но это тоже не сработало.
__typename в optimisticResponse.ИДК, если Mutation - правильное значение, поэтому я тоже попытался AppConnection, но он все еще не работает.
Полный код можно найти здесь .Весь код существует в одном файле для простоты.Это очень простое приложение, которое имеет 2 входа и 1 кнопку отправки.Похоже -
