From caa9726c76a742263a3b095757983f53b208c511 Mon Sep 17 00:00:00 2001 From: Guillaume Chau Date: Thu, 28 Nov 2019 19:57:48 +0100 Subject: [PATCH] feat: wip useLoading --- .../vue-apollo-composable/src/useLoading.ts | 32 +++++++ .../src/util/loadingTracking.ts | 93 +++++++++++++++++++ 2 files changed, 125 insertions(+) create mode 100644 packages/vue-apollo-composable/src/useLoading.ts create mode 100644 packages/vue-apollo-composable/src/util/loadingTracking.ts diff --git a/packages/vue-apollo-composable/src/useLoading.ts b/packages/vue-apollo-composable/src/useLoading.ts new file mode 100644 index 0000000..0cac632 --- /dev/null +++ b/packages/vue-apollo-composable/src/useLoading.ts @@ -0,0 +1,32 @@ +import { getCurrentTracking, getAppTracking } from './util/loadingTracking' +import { computed } from '@vue/composition-api' + +export function useQueryLoading () { + const { tracking } = getCurrentTracking() + return computed(() => tracking.queries.value > 0) +} + +export function useMutationLoading () { + const { tracking } = getCurrentTracking() + return computed(() => tracking.mutations.value > 0) +} + +export function useSubscriptionLoading () { + const { tracking } = getCurrentTracking() + return computed(() => tracking.subscriptions.value > 0) +} + +export function useGlobalQueryLoading () { + const { appTracking } = getAppTracking() + return computed(() => appTracking.queries.value > 0) +} + +export function useGlobalMutationLoading () { + const { appTracking } = getAppTracking() + return computed(() => appTracking.mutations.value > 0) +} + +export function useGlobalSubscriptionLoading () { + const { appTracking } = getAppTracking() + return computed(() => appTracking.subscriptions.value > 0) +} diff --git a/packages/vue-apollo-composable/src/util/loadingTracking.ts b/packages/vue-apollo-composable/src/util/loadingTracking.ts new file mode 100644 index 0000000..5aa798d --- /dev/null +++ b/packages/vue-apollo-composable/src/util/loadingTracking.ts @@ -0,0 +1,93 @@ +import { Ref, watch, onUnmounted, ref } from '@vue/composition-api' +import { getCurrentVue, getCurrentVM } from '@vue/composition-api/dist/runtimeContext' +import { VueConstructor } from 'vue' + +export interface LoadingTracking { + queries: Ref + mutations: Ref + subscriptions: Ref +} + +export interface AppLoadingTracking extends LoadingTracking { + components: Map +} + +const trackingMap = new Map() + +export function getAppTracking () { + const currentVue = getCurrentVue() + let appTracking: AppLoadingTracking + + if (!trackingMap.has(currentVue)) { + // Add per Vue tracking + trackingMap.set(currentVue, appTracking = { + queries: ref(0), + mutations: ref(0), + subscriptions: ref(0), + components: new Map(), + }) + } else { + appTracking = trackingMap.get(currentVue) + } + + return { + appTracking + } +} + +export function getCurrentTracking () { + const { appTracking } = getAppTracking() + const currentVM = getCurrentVM() + + let tracking: LoadingTracking + + if (!appTracking.components.has(currentVM)) { + // Add per-component tracking + appTracking.components.set(currentVM, tracking = { + queries: ref(0), + mutations: ref(0), + subscriptions: ref(0), + }) + // Cleanup + onUnmounted(() => { + appTracking.components.delete(currentVM) + }) + } else { + tracking = appTracking.components.get(currentVM) + } + + return { + appTracking, + tracking + } +} + +export function trackQuery (loading: Ref) { + const { appTracking, tracking } = getCurrentTracking() + + watch(loading, value => { + const mod = value ? 1 : -1 + tracking.queries.value += mod + appTracking.queries.value += mod + }) +} + +export function trackMutation (loading: Ref) { + const { appTracking, tracking } = getCurrentTracking() + + watch(loading, value => { + const mod = value ? 1 : -1 + tracking.mutations.value += mod + appTracking.mutations.value += mod + }) +} + +export function trackSubscription (loading: Ref) { + const { appTracking, tracking } = getCurrentTracking() + + watch(loading, value => { + const mod = value ? 1 : -1 + tracking.subscriptions.value += mod + appTracking.subscriptions.value += mod + }) +}