Apollo Optimistic UI does not work in Mutation Component?

Question

I am using <Mutation /> component which has Render Prop API & trying to do Optimistic Response in the UI.

So far I have this chunk in an _onSubmit function -

createApp({
    variables: { id: uuid(), name, link },
    optimisticResponse: {
        __typename: "Mutation",
        createApp: {
            __typename: "App",
            id: negativeRandom(),
            name,
            link
        }
    }
});

And my <Mutation /> component looks like -

<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>

I know that update function in <Mutation /> runs twice, once when optimisticResponse is ran & second time when server response comes back.

On the first time, I give them id as a number. Checkout createApp in optimisticResponse where id: negativeRandom()

That's why my update prop in <Mutation /> component has a check if createApp.id is a number then push it in the array. It means that if data returned from local then push it in local cache & if returned from server don't push it.

But what happens is the data is only showed when returned from the server. The function update runs twice but it does not push it in the array.

I think there might 3 problems -

1. Either the update function does not run when local state is pushed

2. I've tried making fetchPolicy equal to cache-and-network & cache-first but it didn't work too.

3. The __typename in optimisticResponse. Idk if Mutation is the correct value, so I tried AppConnection too but it still does not work.

The complete code can be found here. Whole code exist in one file for simplicity. Its a very simple app which has 2 inputs & 1 submit button. It looks like -

Note: Same thing works with React. Here's a link to React Repo - https://github.com/deadcoder0904/react-darkmodelist

Answer 1

Apparently this was a bug in Apollo or React Apollo package. Don't know which bug or was it just for React Native but I just updated my dependencies & solved it without changing any code

You can check out the full code at https://github.com/deadcoder0904/react-native-darkmode-list