feat: useLoading

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'

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)
   

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

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()

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 {