vuejs / vuejs/apollo

Local Sate: Reactive Query not updating as expected

Open
#985 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending triage
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
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.