chore: make auth and apollo a bit more reactive

components/pages/filters/index.vue

@@ -5,43 +5,38 @@
         <v-flex xs12>
           <v-card>
             <v-container fluid grid-list-md>
-              <v-layout row wrap v-if="!loading && data">
+              <v-layout row wrap>
                 <list
-                  :model="data.bands"
+                  :model="bands || []"
                   title="filters.band"
                   type="band"
                   :toggleIgnore="toggleIgnore"
-                  v-if="data.bands"
                 />
                 <v-flex xs12 sm6 md4 lg3>
                   <v-layout column>
                     <list
-                      :model="data.states"
+                      :model="states || []"
                       title="filters.state"
                       type="state"
                       :toggleIgnore="toggleIgnore"
-                      v-if="data.states"
                     />
                     <list
-                      :model="data.municipalities"
+                      :model="municipalities || []"
                       title="filters.municipality"
                       type="municipality"
                       :toggleIgnore="toggleIgnore"
-                      v-if="data.municipalities"
                     />
                     <list
-                      :model="data.cities"
+                      :model="cities || []"
                       title="filters.city"
                       type="city"
                       :toggleIgnore="toggleIgnore"
-                      v-if="data.cities"
                     />
                     <list
-                      :model="data.danceHalls"
+                      :model="danceHalls || []"
                       title="filters.hall"
                       type="danceHall"
                       :toggleIgnore="toggleIgnore"
-                      v-if="data.danceHalls"
                     />
                   </v-layout>
                 </v-flex>
@@ -74,8 +69,8 @@ import {
 } from '~/utils/graph-client'
 
 import List from './List'
-import { useMutation, useQuery } from '../../../plugins/apollo'
-import useAuth from '../../../plugins/auth'
+import { useMutation, useQuery, useResult } from '../../../plugins/apollo'
+import { useAuth } from '../../../plugins/auth'
 import { useTranslation } from '../../../plugins/i18n'
 
 export default {
@@ -88,6 +83,11 @@ export default {
     setTitle(t('app.links.filters'))
     const { isAuthenticated } = useAuth()
     const { data, loading, refetch } = useQuery(fetchFilters)
+    const bands = useResult(data, [], data => data.bands)
+    const cities = useResult(data, [], data => data.cities)
+    const danceHalls = useResult(data, [], data => data.danceHalls)
+    const municipalities = useResult(data, [], data => data.municipalities)
+    const states = useResult(data, [], data => data.states)
     const snackbar = ref({ active: false, color: 'success', text: '' })
     const [doToggleIgnoreBand] = useMutation(toggleIgnoreBand)
     const [doToggleIgnoreDanceHall] = useMutation(toggleIgnoreDanceHall)
@@ -97,7 +97,7 @@ export default {
 
     const toggleIgnoreSuccess = name => {
       return () => {
-        refetch.value()
+        refetch()
         snackbar.value.color = 'success'
         snackbar.value.text = t('filters.success', { name })
         snackbar.value.active = true
@@ -146,7 +146,11 @@ export default {
     return {
       isAuthenticated,
       loading,
-      data,
+      bands,
+      danceHalls,
+      cities,
+      municipalities,
+      states,
       snackbar,
       toggleIgnore
     }