fix: don't call variables if query is disabled + fix enabling race conditions, fix #1243, fix #1422

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<string | null>(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 {

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