Apollo Optimistic UI не работает в компоненте мутации?

Question

Я использую <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.id это number затем вставьте его в массив. Это означает, что если данные возвращаются из локального хранилища, то помещают их в локальный кеш, а при возврате с сервера не отправляют.

Но происходит то, что данные отображаются только при возврате с сервера. Функция update запускается дважды, но не помещает его в массив.

Я думаю, что может быть 3 проблемы -

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

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

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

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

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

Answer 1

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

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