Пользовательский интерфейс Apollo Optimistic не работает в компоненте мутации?

Я использую компонент <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 проблемы -

  1. Либо функция update не запускается при нажатии локального состояния

  2. Я пытался сделать fetchPolicy равным cache-and-network и cache-first, но это тоже не сработало.

  3. __typename в optimisticResponse. Idk, если Mutation - правильное значение, поэтому я тоже попробовал AppConnection, но он по-прежнему не работает.

Полный код можно найти здесь. Весь код существует в один файл для простоты. Это очень простое приложение с 2 входами и 1 кнопкой отправки. Это выглядит как -

Пользовательский интерфейс Apollo Optimistic не работает в компоненте мутации?

Примечание. То же самое работает с React. Вот ссылка на React Repo - https://github.com/deadcoder0904/react-darkmodelist

Я запустил ваш проект, и, похоже, он отлично работает. Я изменил пользовательский интерфейс, чтобы отображать идентификатор перед отображением имени и ответов сервера, а также кэшированных оптимистичных ответов пользовательского интерфейса.

user3256877 06.06.2018 00:06

Какой проект? Реагировать проект работает. React Native не работает с оптимистичным пользовательским интерфейсом. Он показывает элемент в списке через 2 секунды после того, как сервер вернет ответ. Вы можете подробнее рассказать о коде? Я не понимаю, что ты говоришь.

deadcoder0904 06.06.2018 09:51

Извиняюсь за запутанное объяснение. Для ясности, я запустил ваш проект react native на симуляторе iOS. При подключении к Интернету я добавил новый город, и он ответил с сервера и, как и ожидалось, отобразил ответ сервера в списке. Когда соединение недоступно, оптимистичный пользовательский интерфейс работает и показывает отрицательный идентификатор. Однако я только что перечитал ваш вопрос и понял, в чем ваша настоящая проблема. Дело не в том, что вы ничего не видите, когда не получаете ответа, дело в том, что вы ничего не видите, пока не получите ответ, верно? ?

user3256877 07.06.2018 00:43

Да, точно. И что самое забавное, тот же код написан на React и работает отлично. В React Code я только что удалил if (typeof createApp.id === "number"), и все точно так же, и оно работает, в то время как в React Native, если я удаляю то же условие if, я получаю повторяющиеся значения из Optimistic Response и Actual Mutation. Итак, такой же код с небольшой разницей. React one работает без проблем, а React Native не работает (я имею в виду только оптимистичный интерфейс) ?

deadcoder0904 07.06.2018 06:42

Проверьте __typename объекта createApp, возвращенного мутацией. Он должен быть того же типа, что и listApps.items вашего запроса listApps.

eronisko 02.07.2018 14:01

Да, они оба возвращают App в качестве своего __typename

deadcoder0904 02.07.2018 21:57

@eronisko Спасибо за добавление комментария. Я только что обновил свои зависимости, и теперь все работает. Я думаю, что это была ошибка в Apollo Client или React Apollo в сочетании с React Native, потому что я не менял код, и это сработало :)

deadcoder0904 02.07.2018 22:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
19
7
1 390
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По-видимому, это была ошибка в пакете Apollo или React Apollo. Не знаю, какая ошибка или это была только для React Native, но я только что обновил свои зависимости и решил ее, не меняя код

Вы можете проверить полный код на https://github.com/deadcoder0904/react-native-darkmode-list

Другие вопросы по теме