Я использую компонент <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 кнопка отправки. Это выглядит как -