Я использую компонент <Mutation/> который имеет Render Prop API и пытается оптимистично реагировать в пользовательском интерфейсе.
Пока у меня есть этот кусок в функции _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. Checkout createApp в optimisticResponse где id: negativeRandom()
Поэтому моя поддержка update в компоненте <Mutation/> имеет проверку, если createApp.id - это number затем нажмите его в массиве. Это означает, что если данные возвращаются из локального, то перетащите их в локальный кеш, и если они возвращаются с сервера, не нажимайте его.
Но происходит то, что данные отображаются только при возврате с сервера. update функции выполняется дважды, но оно не вставляет его в массив.
Я думаю, что могут быть 3 проблемы -
-
Либо функция
updateне запускается при нажатии локального состояния -
Я попытался сделать
fetchPolicyравнымcache-and-networkиcache-firstно он тоже не работал. -
__typenameвoptimisticResponse. Idk, еслиMutationявляется правильным значением, поэтому я также попыталсяAppConnectionно он все еще не работает.
Полный код можно найти здесь. Весь код существует в одном файле для простоты. Это очень простое приложение, в котором есть 2 входа и 1 кнопка отправки. Это выглядит как -
