Description
Describe the bug
Reactive Query not updating results as expected:
I have a getTasks query that shows all tasks in my cache
I also have a tasksTodo query that shows all tasks in my cache that are uncompleted (gets the info by querying getTasks in a resolver)
When I click a task to complete it (or delete it) it should be removed from tasksTodo, however this only happens when I change route and back (something to do with lifecycle hooks).
I also tried to manually add refetchQueries: queries.tasksTodo to my mutations to no avail
In the following GIF, top is getTasks, bottom is tasksTodo
To Reproduce
Some samples of the code:
export const getTasks = gql`
query getTasks {
tasks @client {
id
name
completed
dueDate
dueTime
}
}
`
export const tasksTodo = gql`
query tasksTodo {
tasksTodo @client
}
`
tasksTodo: (root, args, { cache }, info) => {
const data = cache.readQuery({
query: getTasks
})
const todo = data.tasks.filter(todo => todo.completed === false)
const update = { tasks: [...todo] }
return update
}
apollo: {
tasks: {
query: queries.getTasks
},
tasksTodo: {
query: queries.tasksTodo,
fetchPolicy: 'no-cache'
}
}
this.$apollo.mutate({
mutation: mutations.DELETE_TASK,
refetchQueries: queries.tasksTodo,
variables: {
id: this.task.id
}
})
Expected behavior
When I click on a task to complete or delete it, to update tasksTodo by removing those tasks from the array
Versions
vue: 2.6.11
vue-apollo: 3.0.3
apollo-client: 2.6.10
(I understand there are better ways to achieve filtering but I need to understand why this doesn't work)