Tengo un front con vue-apollo que consume un back con consultas graphql. Es un crud de usuarios-ambientes-plantas. Me suceden dos cosas en principio:
Los usuarios (una vez logueados) solo pueden ver sus ambientes (esto debe ser así). Pero si yo cierro sesión, y vuelvo a iniciar con un nuevo usuario, veo los ambientes del usuario que estaba conectado en la sesión anterior. (cerrar sesión limpia
vuex
ylocalStorage
, por lo que no sé si es un problema de cache o si me falta configurar algo para que sea "reactivo" el cambio)Cuando se renderiza la lista de ambientes, estos tienen un botón para eliminarlos. Funciona correctamente, pero el elemento eliminado no desaparece si no recargo la página.
Cuando creo un ambiente nuevo, este se carga correctamente pero no se visualiza en la lista hasta no refrescar el sitio.
Cual sería la manera correcta de conectar la reactividad de vue con el resultado de las queries?
Pongo un pequeño ejemplo de como armo la consulta y como las levanto en el template
.
En mi componente Ambientes.vue tengo la query
<script>
data(){...},
methods:{...},
apollo: {
getMisAmbientes: gql`
query {
getMisAmbientes {
_id
nombre
tipo
tiempo
}
}
`
},
...
</script>
Que se renderiza en el template
<div v-for="(item, index) in getMisAmbientes" :key="index">
<card-ambiente :item="item" />
</div>