Я использую компонент <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.idnumber, а затем вставляет его в массив. Это означает, что если данные возвращаются из локального, то помещайте их в локальный кеш, а если они возвращаются с сервера, не толкайте их.
Но происходит то, что данные отображаются только тогда, когда они возвращаются с сервера. Функция update запускается дважды, но не помещает ее в массив.
Думаю, может быть 3 проблемы -
Либо функция update не запускается при нажатии локального состояния
Я пытался сделать fetchPolicy равным cache-and-network и cache-first, но это тоже не сработало.
__typename в optimisticResponse. Idk, если Mutation - правильное значение, поэтому я тоже попробовал AppConnection, но он по-прежнему не работает.
Полный код можно найти здесь. Весь код существует в один файл для простоты. Это очень простое приложение с 2 входами и 1 кнопкой отправки. Это выглядит как -

Какой проект? Реагировать проект работает. React Native не работает с оптимистичным пользовательским интерфейсом. Он показывает элемент в списке через 2 секунды после того, как сервер вернет ответ. Вы можете подробнее рассказать о коде? Я не понимаю, что ты говоришь.
Извиняюсь за запутанное объяснение. Для ясности, я запустил ваш проект react native на симуляторе iOS. При подключении к Интернету я добавил новый город, и он ответил с сервера и, как и ожидалось, отобразил ответ сервера в списке. Когда соединение недоступно, оптимистичный пользовательский интерфейс работает и показывает отрицательный идентификатор. Однако я только что перечитал ваш вопрос и понял, в чем ваша настоящая проблема. Дело не в том, что вы ничего не видите, когда не получаете ответа, дело в том, что вы ничего не видите, пока не получите ответ, верно? ?
Да, точно. И что самое забавное, тот же код написан на React и работает отлично. В React Code я только что удалил if (typeof createApp.id === "number"), и все точно так же, и оно работает, в то время как в React Native, если я удаляю то же условие if, я получаю повторяющиеся значения из Optimistic Response и Actual Mutation. Итак, такой же код с небольшой разницей. React one работает без проблем, а React Native не работает (я имею в виду только оптимистичный интерфейс) ?
Проверьте __typename объекта createApp, возвращенного мутацией. Он должен быть того же типа, что и listApps.items вашего запроса listApps.
Да, они оба возвращают App в качестве своего __typename
@eronisko Спасибо за добавление комментария. Я только что обновил свои зависимости, и теперь все работает. Я думаю, что это была ошибка в Apollo Client или React Apollo в сочетании с React Native, потому что я не менял код, и это сработало :)





По-видимому, это была ошибка в пакете Apollo или React Apollo. Не знаю, какая ошибка или это была только для React Native, но я только что обновил свои зависимости и решил ее, не меняя код
Вы можете проверить полный код на https://github.com/deadcoder0904/react-native-darkmode-list
Я запустил ваш проект, и, похоже, он отлично работает. Я изменил пользовательский интерфейс, чтобы отображать идентификатор перед отображением имени и ответов сервера, а также кэшированных оптимистичных ответов пользовательского интерфейса.