Оптимистический пользовательский интерфейс Apollo не работает в компоненте Mutation? - программирование
Подтвердить что ты не робот

Оптимистический пользовательский интерфейс Apollo не работает в компоненте Mutation?

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

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

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

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

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

dark mode list app

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

4b9b3361

Ответ 1

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

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