I'm trying to do an optimisticResponse in a mutation with ApolloClient with vue-apollo.
The mutation itself works fine - the server gets updated, and when I refresh the page, the insert has successfully appeared. However, the optimisticResponse that gets written to the query becomes "undefined" once the update() function runs for the second time, with the "real" response from the server.
My mutation code looks like this:
this.$apollo.mutate({
mutation: UPSERT_ITEMS,
variables: {
todoInput: [todoInput]
},
update: (store, result) => {
const upsertTodos = result.data!.upsertTodos
const newTodo = upsertTodos.todo
const data = store.readQuery<QueryResult>({ query: GET_PROJECTS })
console.log("Results from the cache:", data);
data!.rc_todos.push(newTodo)
console.log("after that push, data looks like...", data)
store.writeQuery({ query: GET_PROJECTS, data })
// re-reading the query for debugging purposes:
const sameData = store.readQuery<QueryResult>({ query: GET_PROJECTS })
console.log("New results from the cache:", sameData)
},
optimisticResponse: {
__typename: "Mutation",
upsertTodos: {
__typename: "InsertedTodo",
id: 1,
todo_id: 1,
todo: {
id: 1,
label: nodeTitle,
children: [],
__typename: "rc_todos"
}
},
},
})
Note that right now I'm calling readQuery a second time in update() for debugging purposes.
In that second call of readQuery in the first run of update() (i.e. right after inserting optimisticResponse it looks like this:
...so everything looks fine, the fields there match the data that was already in the cache, etc.
But, when update() runs the second time (to process results from the server) our optimisticResponse is "there" but as undefined:

This yields an error TypeError: Cannot read property '__typename' of undefined.
To be honest, I'm not sure what's supposed to be happening at this point in the lifecycle... should optimisticResult still be there? Or should it have already been removed? In either case, I'm sure it shouldn't be there and undefined since that's causing the error.