Vue-apollo refetch query from another component

Question

I wonder if it's possible to refetch a query from one component so it would be updated in another component without refreshing the component itself. After a mutation, I see that the apollo cache has been updated, but I don't see the data in my other component that is "alive" already. My global apollo fetch policy is:

watchQuery: {
  fetchPolicy: 'cache-and-network'
}

Answer 1

I've figured out, that I need to update my cache directly with writeQuery. Because refetchQuery gives you a new object, but if you want it to be snappy, you need to mutate your existing object in your apollo cache. A code example would be:

  .mutate({
    mutation: CREATE_USER,
    variables: { ...user },
    update(store, { data: { createUser } }) {
      const data = store.readQuery({ query: LIST_USERS })
      data.users.items.push(createUser)
      store.writeQuery({ query: LIST_USERS, data })
    }
  })