chore: make auth and apollo a bit more reactive

components/pages/origins/index.vue

@@ -30,8 +30,8 @@
           </v-text-field>
         </v-flex>
       </v-layout>
-      <template v-if="data && data.origins">
-        <v-layout row wrap v-for="origin in data.origins" :key="origin">
+      <template>
+        <v-layout row wrap v-for="origin in origins" :key="origin">
           <v-flex xs12>
             <v-tooltip top slot="prepend">
               <template v-slot:activator="{ on }">
@@ -65,8 +65,8 @@ import {
   removeOrigin,
   saveOrigin
 } from '../../../utils/graph-client'
-import { useLazyQuery, useMutation, useQuery } from '../../../plugins/apollo'
-import useAuth from '../../../plugins/auth'
+import { useLazyQuery, useMutation, useQuery, useResult } from '../../../plugins/apollo'
+import { useAuth } from '../../../plugins/auth'
 import { useTranslation } from '../../../plugins/i18n'
 
 export default {
@@ -76,10 +76,11 @@ export default {
     setTitle(t('app.links.origins'))
     const { isAuthenticated } = useAuth()
     const { data, loading, refetch } = useQuery(findOrigins)
+    const origins = useResult(data, [])
     const snackbar = ref({ active: false, color: 'success', text: '' })
     const [doSaveOrigin] = useMutation(saveOrigin)
     const [doRemoveOrigin] = useMutation(removeOrigin)
-    const [doFetchAddress, { data: address }] = useLazyQuery(fetchAddress)
+    const [doFetchAddress] = useLazyQuery(fetchAddress)
     const origin = ref('')
     const fetchAddressFn = () => {
       if (window.navigator) {
@@ -88,23 +89,23 @@ export default {
             variables: {
               latlng: `${pos.coords.latitude},${pos.coords.longitude}`
             }
-          }).then(() => {
-            origin.value = address.value.address
+          }).then(res => {
+            origin.value = res.address
           })
         })
       }
     }
     const saveOriginFn = o =>
       doSaveOrigin({ variables: { origin: o } }).then(() => {
-        refetch.value()
+        refetch()
         origin.value = ''
       })
     const removeOriginFn = o =>
-      doRemoveOrigin({ variables: { origin: o } }).then(() => refetch.value())
+      doRemoveOrigin({ variables: { origin: o } }).then(() => refetch())
     return {
       isAuthenticated,
       loading,
-      data,
+      origins,
       snackbar,
       origin,
       saveOrigin: saveOriginFn,