chore: switch to apollo-composable

components/pages/origins/index.vue

@@ -11,10 +11,11 @@
             <v-tooltip top slot="append-outer">
               <template v-slot:activator="{ on }">
                 <v-icon v-on="on" v-on:click="fetchAddress()"
-                  >mdi-crosshairs-gps</v-icon
+                >mdi-crosshairs-gps
+                </v-icon
                 >
               </template>
-              <span v-text="$t('origins.fetchAddress')" />
+              <span v-text="$t('origins.fetchAddress')"/>
             </v-tooltip>
             <v-tooltip top slot="prepend">
               <template v-slot:activator="{ on }">
@@ -22,10 +23,11 @@
                   v-on="on"
                   :disabled="!origin"
                   v-on:click="saveOrigin(origin)"
-                  >mdi-bookmark-plus-outline</v-icon
+                >mdi-bookmark-plus-outline
+                </v-icon
                 >
               </template>
-              <span v-text="$t('origins.save')" />
+              <span v-text="$t('origins.save')"/>
             </v-tooltip>
           </v-text-field>
         </v-flex>
@@ -36,10 +38,10 @@
             <v-tooltip top slot="prepend">
               <template v-slot:activator="{ on }">
                 <v-icon v-on="on" v-on:click="removeOrigin(origin)"
-                  >mdi-delete-outline
+                >mdi-delete-outline
                 </v-icon>
               </template>
-              <span v-text="$t('origins.remove')" />
+              <span v-text="$t('origins.remove')"/>
             </v-tooltip>
             <span>{{ origin }}</span>
           </v-flex>
@@ -57,66 +59,55 @@
 </template>
 
 <script>
-import { ref } from '@vue/composition-api'
-import { useMutations } from '@u3u/vue-hooks'
-import {
-  fetchAddress,
-  findOrigins,
-  removeOrigin,
-  saveOrigin
-} from '../../../utils/graph-client'
-import {
-  useLazyQuery,
-  useMutation,
-  useQuery,
-  useResult
-} from '../../../plugins/apollo'
-import useAuth from '../../../plugins/auth'
-import { useTranslation } from '../../../plugins/i18n'
+  import { ref } from '@vue/composition-api'
+  import { useMutations } from '@u3u/vue-hooks'
+  import { fetchAddress, findOrigins, removeOrigin, saveOrigin } from '../../../utils/graph-client'
+  import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
+  import { useAuth } from '../../../plugins/auth'
+  import { useTranslation } from '../../../plugins/i18n'
 
-export default {
-  setup() {
-    const { setTitle } = useMutations(['setTitle'])
-    const { t } = useTranslation()
-    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] = useLazyQuery(fetchAddress)
-    const origin = ref('')
-    const fetchAddressFn = () => {
-      if (window.navigator) {
-        window.navigator.geolocation.getCurrentPosition(pos => {
-          doFetchAddress({
-            variables: {
-              latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-            }
-          }).then(res => {
-            origin.value = res.address
+  export default {
+    setup() {
+      const { setTitle } = useMutations(['setTitle'])
+      const { t } = useTranslation()
+      setTitle(t('app.links.origins'))
+      const { isAuthenticated } = useAuth()
+      const { result: data, loading, refetch } = useQuery(findOrigins)
+      const origins = useResult(data, [])
+      const snackbar = ref({ active: false, color: 'success', text: '' })
+      const {mutate: doSaveOrigin} = useMutation(saveOrigin)
+      const {mutate: doRemoveOrigin} = useMutation(removeOrigin)
+      const enabled = ref(false)
+      const { refetch: doFetchAddress } = useQuery(fetchAddress, {}, () => ({ enabled: enabled.value }))
+      const origin = ref('')
+      const fetchAddressFn = () => {
+        if (window.navigator) {
+          window.navigator.geolocation.getCurrentPosition(pos => {
+            enabled.value = true
+            doFetchAddress({ latlng: `${pos.coords.latitude},${pos.coords.longitude}` })
+              .then(res => {
+                origin.value = res.address
+              })
           })
+        }
+      }
+      const saveOriginFn = o =>
+        doSaveOrigin({ origin: o }).then(() => {
+          refetch()
+          origin.value = ''
         })
+      const removeOriginFn = o =>
+        doRemoveOrigin({ origin: o }).then(() => refetch())
+      return {
+        isAuthenticated,
+        loading,
+        origins,
+        snackbar,
+        origin,
+        saveOrigin: saveOriginFn,
+        removeOrigin: removeOriginFn,
+        fetchAddress: fetchAddressFn
       }
     }
-    const saveOriginFn = o =>
-      doSaveOrigin({ variables: { origin: o } }).then(() => {
-        refetch()
-        origin.value = ''
-      })
-    const removeOriginFn = o =>
-      doRemoveOrigin({ variables: { origin: o } }).then(() => refetch())
-    return {
-      isAuthenticated,
-      loading,
-      origins,
-      snackbar,
-      origin,
-      saveOrigin: saveOriginFn,
-      removeOrigin: removeOriginFn,
-      fetchAddress: fetchAddressFn
-    }
   }
-}
 </script>