diff --git a/packages/test-e2e-composable-vue3/src/components/Disabled.vue b/packages/test-e2e-composable-vue3/src/components/Disabled.vue index b62b938..90e8e9a 100644 --- a/packages/test-e2e-composable-vue3/src/components/Disabled.vue +++ b/packages/test-e2e-composable-vue3/src/components/Disabled.vue @@ -5,7 +5,7 @@ import { defineComponent, computed, ref } from 'vue' export default defineComponent({ setup () { - const selectedId = ref(null) + const selectedId = ref<{ id: string } | null>(null) const { result, loading } = useQuery(gql` query channel ($id: ID!) { @@ -18,7 +18,8 @@ export default defineComponent({ } } `, () => ({ - id: selectedId.value, + // Should not throw since it will not be called if the query is disabled + id: selectedId.value!.id, }), () => ({ fetchPolicy: 'no-cache', enabled: !!selectedId.value, @@ -26,7 +27,7 @@ export default defineComponent({ const channel = computed(() => result.value?.channel) function load () { - selectedId.value = 'general' + selectedId.value = { id: 'general' } } return { diff --git a/packages/vue-apollo-composable/src/useQuery.ts b/packages/vue-apollo-composable/src/useQuery.ts index 5615e8b..551a14f 100644 --- a/packages/vue-apollo-composable/src/useQuery.ts +++ b/packages/vue-apollo-composable/src/useQuery.ts @@ -401,6 +401,27 @@ export function useQueryImpl< debouncedRestart() } + // Enabled state + + const forceDisabled = ref(lazy) + const enabledOption = computed(() => !currentOptions.value || currentOptions.value.enabled == null || currentOptions.value.enabled) + const isEnabled = computed(() => enabledOption.value && !forceDisabled.value) + + // Applying options first (in case it disables the query) + watch(() => unref(optionsRef), value => { + if (currentOptions.value && ( + currentOptions.value.throttle !== value.throttle || + currentOptions.value.debounce !== value.debounce + )) { + updateRestartFn() + } + currentOptions.value = value + restart() + }, { + deep: true, + immediate: true, + }) + // Applying document let currentDocument: DocumentNode watch(documentRef, value => { @@ -413,8 +434,14 @@ export function useQueryImpl< // Applying variables let currentVariables: TVariables | undefined let currentVariablesSerialized: string - watch(variablesRef, (value, oldValue) => { - const serialized = JSON.stringify(value) + watch(() => { + if (isEnabled.value) { + return variablesRef.value + } else { + return undefined + } + }, (value) => { + const serialized = JSON.stringify([value, isEnabled.value]) if (serialized !== currentVariablesSerialized) { currentVariables = value restart() @@ -425,21 +452,6 @@ export function useQueryImpl< immediate: true, }) - // Applying options - watch(() => unref(optionsRef), value => { - if (currentOptions.value && ( - currentOptions.value.throttle !== value.throttle || - currentOptions.value.debounce !== value.debounce - )) { - updateRestartFn() - } - currentOptions.value = value - restart() - }, { - deep: true, - immediate: true, - }) - // Refetch function refetch (variables: TVariables | undefined = undefined) { @@ -519,23 +531,22 @@ export function useQueryImpl< item.unsubscribeFns.push(unsubscribe) } - // Enabled state - - const forceDisabled = ref(lazy) - const enabledOption = computed(() => !currentOptions.value || currentOptions.value.enabled == null || currentOptions.value.enabled) - const isEnabled = computed(() => enabledOption.value && !forceDisabled.value) - // Auto start & stop + watch(isEnabled, value => { if (value) { - start() + nextTick(() => { + start() + }) } else { stop() } - }, { - immediate: true, }) + if (isEnabled.value) { + start() + } + // Teardown vm && onBeforeUnmount(() => { stop()