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
updatefunction does not run when local state is pushed -
I've tried making
fetchPolicyequal tocache-and-network&cache-firstbut it didn't work too. -
The
__typenameinoptimisticResponse. Idk ifMutationis the correct value, so I triedAppConnectiontoo 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 -

from Apollo Optimistic UI does not work in Mutation Component?
No comments:
Post a Comment