Skip to content

Commit

Permalink
fix: use effect scope instead of component instance
Browse files Browse the repository at this point in the history
  • Loading branch information
nickmessing committed Mar 27, 2024
1 parent 50a8ab1 commit 16aa328
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 37 deletions.
8 changes: 4 additions & 4 deletions packages/vue-apollo-composable/src/useMutation.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { DocumentNode } from 'graphql'
import { MutationOptions, OperationVariables, FetchResult, TypedDocumentNode, ApolloError, ApolloClient } from '@apollo/client/core/index.js'
import { ref, onScopeDispose, isRef, Ref, getCurrentInstance, shallowRef } from 'vue-demi'
import { ref, onScopeDispose, isRef, Ref, getCurrentScope, shallowRef } from 'vue-demi'
import { useApolloClient } from './useApolloClient'
import { ReactiveFunction } from './util/ReactiveFunction'
import { useEventHook } from './util/useEventHook'
Expand Down Expand Up @@ -53,9 +53,9 @@ export function useMutation<
document: DocumentParameter<TResult, TVariables>,
options: OptionsParameter<TResult, TVariables> = {},
): UseMutationReturn<TResult, TVariables> {
const vm = getCurrentInstance()
const currentScope = getCurrentScope()
const loading = ref<boolean>(false)
vm && trackMutation(loading)
currentScope && trackMutation(loading)
const error = shallowRef<ApolloError | null>(null)
const called = ref<boolean>(false)

Expand Down Expand Up @@ -118,7 +118,7 @@ export function useMutation<
return null
}

vm && onScopeDispose(() => {
currentScope && onScopeDispose(() => {
loading.value = false
})

Expand Down
23 changes: 12 additions & 11 deletions packages/vue-apollo-composable/src/useQuery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
computed,
watch,
onServerPrefetch,
getCurrentInstance,
getCurrentScope,
onScopeDispose,
nextTick,
shallowRef,
Expand Down Expand Up @@ -34,8 +34,6 @@ import { trackQuery } from './util/loadingTracking'
import { resultErrorsToApolloError, toApolloError } from './util/toApolloError'
import { isServer } from './util/env'

import type { CurrentInstance } from './util/types'

export interface UseQueryOptions<
// eslint-disable-next-line @typescript-eslint/no-unused-vars
TResult = any,
Expand Down Expand Up @@ -152,8 +150,7 @@ export function useQueryImpl<
options: OptionsParameter<TResult, TVariables> = {},
lazy = false,
): UseQueryReturn<TResult, TVariables> {
// Is on server?
const vm = getCurrentInstance() as CurrentInstance | null
const currentScope = getCurrentScope()

const currentOptions = ref<UseQueryOptions<TResult, TVariables>>()

Expand All @@ -176,7 +173,7 @@ export function useQueryImpl<
* Indicates if a network request is pending
*/
const loading = ref(false)
vm && trackQuery(loading)
currentScope && trackQuery(loading)
const networkStatus = ref<number>()

// SSR
Expand All @@ -202,7 +199,7 @@ export function useQueryImpl<
firstRejectError = undefined
}

vm && onServerPrefetch?.(() => {
currentScope && onServerPrefetch?.(() => {
if (!isEnabled.value || (isServer && currentOptions.value?.prefetch === false)) return

return new Promise<void>((resolve, reject) => {
Expand Down Expand Up @@ -615,10 +612,14 @@ export function useQueryImpl<
}

// Teardown
vm && onScopeDispose(() => {
stop()
subscribeToMoreItems.length = 0
})
if (currentScope) {
onScopeDispose(() => {
stop()
subscribeToMoreItems.length = 0
})
} else {
console.warn('[Vue apollo] useQuery() is called outside of an active effect scope and the query will not be automatically stopped.')
}

return {
result,
Expand Down
14 changes: 8 additions & 6 deletions packages/vue-apollo-composable/src/useSubscription.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
watch,
isRef,
computed,
getCurrentInstance,
getCurrentScope,
onScopeDispose,
nextTick,
shallowRef,
Expand All @@ -27,7 +27,6 @@ import { paramToReactive } from './util/paramToReactive'
import { useApolloClient } from './useApolloClient'
import { useEventHook } from './util/useEventHook'
import { trackSubscription } from './util/loadingTracking'
import type { CurrentInstance } from './util/types'
import { toApolloError } from './util/toApolloError'
import { isServer } from './util/env'

Expand Down Expand Up @@ -121,8 +120,7 @@ export function useSubscription <
variables: VariablesParameter<TVariables> | undefined = undefined,
options: OptionsParameter<TResult, TVariables> = {},
): UseSubscriptionReturn<TResult, TVariables> {
// Is on server?
const vm = getCurrentInstance() as CurrentInstance | null
const currentScope = getCurrentScope()

const documentRef = paramToRef(document)
const variablesRef = paramToRef(variables)
Expand All @@ -134,7 +132,7 @@ export function useSubscription <
const errorEvent = useEventHook<[ApolloError, OnErrorContext]>()

const loading = ref(false)
vm && trackSubscription(loading)
currentScope && trackSubscription(loading)

// Apollo Client
const { resolveClient } = useApolloClient()
Expand Down Expand Up @@ -298,7 +296,11 @@ export function useSubscription <
})

// Teardown
vm && onScopeDispose(stop)
if (currentScope) {
onScopeDispose(stop)
} else {
console.warn('[Vue apollo] useSubscription() is called outside of an active effect scope and the subscription will not be automatically stopped.')
}

return {
result,
Expand Down
18 changes: 10 additions & 8 deletions packages/vue-apollo-composable/src/util/loadingTracking.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { Ref, watch, onUnmounted, ref, getCurrentInstance, onScopeDispose } from 'vue-demi'
import { Ref, watch, onUnmounted, ref, getCurrentScope, onScopeDispose } from 'vue-demi'
import { isServer } from './env.js'

import type { EffectScope } from 'vue-demi'

export interface LoadingTracking {
queries: Ref<number>
mutations: Ref<number>
subscriptions: Ref<number>
}

export interface AppLoadingTracking extends LoadingTracking {
components: Map<any, LoadingTracking>
components: Map<EffectScope, LoadingTracking>
}

export const globalTracking: AppLoadingTracking = {
Expand All @@ -19,26 +21,26 @@ export const globalTracking: AppLoadingTracking = {
}

export function getCurrentTracking () {
const vm = getCurrentInstance()
if (!vm) {
const currentScope = getCurrentScope()
if (!currentScope) {
return {}
}

let tracking: LoadingTracking

if (!globalTracking.components.has(vm)) {
if (!globalTracking.components.has(currentScope)) {
// Add per-component tracking
globalTracking.components.set(vm, tracking = {
globalTracking.components.set(currentScope, tracking = {
queries: ref(0),
mutations: ref(0),
subscriptions: ref(0),
})
// Cleanup
onUnmounted(() => {
globalTracking.components.delete(vm)
globalTracking.components.delete(currentScope)
})
} else {
tracking = globalTracking.components.get(vm) as LoadingTracking
tracking = globalTracking.components.get(currentScope) as LoadingTracking
}

return {
Expand Down
8 changes: 0 additions & 8 deletions packages/vue-apollo-composable/src/util/types.ts

This file was deleted.

0 comments on commit 16aa328

Please sign in to comment.