Local Sate: Reactive Query not updating as expected
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6k
- Forks
- 516
- PR merge metrics
- No merged PRs in 30d
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)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the getTasks and tasksTodo queries, the tasksTodo resolver, and the Vue Apollo configuration showing fetchPolicy: 'no-cache'. Trace the DELETE_TASK mutation and its refetchQueries option, then verify that completing or deleting a task removes it from tasksTodo without changing routes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100