From 008e5f3fc8c0de0cde2e62379d564779d27ee82c Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Mon, 2 Dec 2019 01:07:30 +0100
Subject: [PATCH] feat: useLoading

---
 packages/vue-apollo-composable/src/index.ts   |  2 +-
 .../vue-apollo-composable/src/useMutation.ts  |  2 ++
 .../vue-apollo-composable/src/useQuery.ts     |  4 +--
 .../src/useSubscription.ts                    |  2 ++
 .../src/util/loadingTracking.ts               | 26 ++++++++-----------
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/vue-apollo-composable/src/index.ts b/packages/vue-apollo-composable/src/index.ts
index 16cbe91..6a79475 100644
--- a/packages/vue-apollo-composable/src/index.ts
+++ b/packages/vue-apollo-composable/src/index.ts
@@ -2,5 +2,5 @@ export * from './useQuery'
 export * from './useMutation'
 export * from './useSubscription'
 export * from './useResult'
-// export * from './useLoading'
+export * from './useLoading'
 export * from './useApolloClient'
diff --git a/packages/vue-apollo-composable/src/useMutation.ts b/packages/vue-apollo-composable/src/useMutation.ts
index c4e6351..50bc6ff 100644
--- a/packages/vue-apollo-composable/src/useMutation.ts
+++ b/packages/vue-apollo-composable/src/useMutation.ts
@@ -5,6 +5,7 @@ import { FetchResult } from 'apollo-link'
 import { useApolloClient } from './useApolloClient'
 import { ReactiveFunction } from './util/ReactiveFunction'
 import { useEventHook } from './util/useEventHook'
+import { trackMutation } from './util/loadingTracking'
 
 export interface UseMutationOptions<
   TResult = any,
@@ -23,6 +24,7 @@ export function useMutation<
   if (!options) options = {}
 
   const loading = ref<boolean>(false)
+  trackMutation(loading)
   const error = ref<Error>(null)
   const called = ref<boolean>(false)
   
diff --git a/packages/vue-apollo-composable/src/useQuery.ts b/packages/vue-apollo-composable/src/useQuery.ts
index 9f241a9..e033f21 100644
--- a/packages/vue-apollo-composable/src/useQuery.ts
+++ b/packages/vue-apollo-composable/src/useQuery.ts
@@ -17,7 +17,7 @@ import { ReactiveFunction } from './util/ReactiveFunction'
 import { paramToRef } from './util/paramToRef'
 import { paramToReactive } from './util/paramToReactive'
 import { useEventHook } from './util/useEventHook'
-// import { trackQuery } from './util/loadingTracking'
+import { trackQuery } from './util/loadingTracking'
 
 export interface UseQueryOptions<
   TResult = any,
@@ -64,7 +64,7 @@ export function useQuery<
    * Indicates if a network request is pending
    */
   const loading = ref(false)
-  // trackQuery(loading)
+  trackQuery(loading)
   const networkStatus = ref<number>()
 
   // Apollo Client
diff --git a/packages/vue-apollo-composable/src/useSubscription.ts b/packages/vue-apollo-composable/src/useSubscription.ts
index 49bc78f..034618b 100644
--- a/packages/vue-apollo-composable/src/useSubscription.ts
+++ b/packages/vue-apollo-composable/src/useSubscription.ts
@@ -10,6 +10,7 @@ import { paramToRef } from './util/paramToRef'
 import { paramToReactive } from './util/paramToReactive'
 import { useApolloClient } from './useApolloClient'
 import { useEventHook } from './util/useEventHook'
+import { trackSubscription } from './util/loadingTracking'
 
 export interface UseSubscriptionOptions <
   TResult = any,
@@ -41,6 +42,7 @@ export function useSubscription <
   const errorEvent = useEventHook<Error>()
 
   const loading = ref(false)
+  trackSubscription(loading)
 
   // Apollo Client
   const { resolveClient } = useApolloClient()
diff --git a/packages/vue-apollo-composable/src/util/loadingTracking.ts b/packages/vue-apollo-composable/src/util/loadingTracking.ts
index 5aa798d..c4bcde0 100644
--- a/packages/vue-apollo-composable/src/util/loadingTracking.ts
+++ b/packages/vue-apollo-composable/src/util/loadingTracking.ts
@@ -1,6 +1,4 @@
-import { Ref, watch, onUnmounted, ref } from '@vue/composition-api'
-import { getCurrentVue, getCurrentVM } from '@vue/composition-api/dist/runtimeContext'
-import { VueConstructor } from 'vue'
+import { Ref, watch, onUnmounted, ref, getCurrentInstance } from '@vue/composition-api'
 
 export interface LoadingTracking {
   queries: Ref<number>
@@ -12,22 +10,20 @@ export interface AppLoadingTracking extends LoadingTracking {
   components: Map<any, LoadingTracking>
 }
 
-const trackingMap = new Map<VueConstructor, AppLoadingTracking>()
-
 export function getAppTracking () {
-  const currentVue = getCurrentVue()
+  const root = getCurrentInstance().$root
   let appTracking: AppLoadingTracking
 
-  if (!trackingMap.has(currentVue)) {
+  if (!root._apolloAppTracking) {
     // Add per Vue tracking
-    trackingMap.set(currentVue, appTracking = {
+    appTracking = root._apolloAppTracking = {
       queries: ref(0),
       mutations: ref(0),
       subscriptions: ref(0),
       components: new Map(),
-    })
+    }
   } else {
-    appTracking = trackingMap.get(currentVue)
+    appTracking = root._apolloAppTracking
   }
 
   return {
@@ -37,23 +33,23 @@ export function getAppTracking () {
 
 export function getCurrentTracking () {
   const { appTracking } = getAppTracking()
-  const currentVM = getCurrentVM()
+  const currentInstance = getCurrentInstance()
   
   let tracking: LoadingTracking
 
-  if (!appTracking.components.has(currentVM)) {
+  if (!appTracking.components.has(currentInstance)) {
     // Add per-component tracking
-    appTracking.components.set(currentVM, tracking = {
+    appTracking.components.set(currentInstance, tracking = {
       queries: ref(0),
       mutations: ref(0),
       subscriptions: ref(0),
     })
     // Cleanup
     onUnmounted(() => {
-      appTracking.components.delete(currentVM)
+      appTracking.components.delete(currentInstance)
     })
   } else {
-    tracking = appTracking.components.get(currentVM)
+    tracking = appTracking.components.get(currentInstance)
   }
 
   return {