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 -
Either the update
function does not run when local state is pushed
I've tried making fetchPolicy
equal to cache-and-network
& cache-first
but it didn't work too.
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 -
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