feat(useQuery): nullable query (auto disable)

Author: Akryum

packages/test-e2e-composable-vue3/src/components/NullQuery.vue

@@ -0,0 +1,69 @@
+<script lang="ts">
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+import { defineComponent, computed, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const selectedId = ref<{ id: string } | null>(null)
+
+    const nullableQuery = () => selectedId.value ? gql`
+      query channel ($id: ID!) {
+        channel (id: $id) {
+          id
+          label
+          messages {
+            id
+          }
+        }
+      }
+    ` : null
+
+    const { result, loading } = useQuery(nullableQuery, () => ({
+      // Should not throw since it will not be called if the query is disabled
+      id: selectedId.value!.id,
+    }), () => ({
+      fetchPolicy: 'no-cache',
+    }))
+    const channel = computed(() => result.value?.channel)
+
+    function load () {
+      selectedId.value = { id: 'general' }
+    }
+
+    return {
+      load,
+      loading,
+      channel,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="m-6">
+    <div>
+      <button
+        class="bg-green-200 rounded-lg p-4"
+        @click="load()"
+      >
+        Load channel
+      </button>
+    </div>
+
+    <div
+      v-if="loading"
+      class="loading"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-if="channel"
+      data-test-id="data"
+    >
+      <div>Loaded channel: {{ channel.label }}</div>
+      <div>Messages: {{ channel.messages.length }}</div>
+    </div>
+  </div>
+</template>

packages/test-e2e-composable-vue3/src/router.ts

@@ -46,5 +46,9 @@ export const router = createRouter({
       path: '/keep-previous-result',
       component: () => import('./components/KeepPreviousResult.vue'),
     },
+    {
+      path: '/null-query',
+      component: () => import('./components/NullQuery.vue'),
+    },
   ],
 })

packages/test-e2e-composable-vue3/tests/e2e/specs/nullableQuery.cy.js

@@ -0,0 +1,17 @@
+/// <reference types="Cypress" />
+
+describe('nullableQuery', () => {
+  beforeEach(() => {
+    cy.task('db:reset')
+    cy.visit('/null-query')
+  })
+
+  it('should enable useQuery only if query is non-null', () => {
+    cy.get('button').should('exist')
+    cy.wait(100)
+    cy.get('[data-test-id="data"]').should('not.exist')
+    cy.get('.loading').should('not.exist')
+    cy.get('button').click()
+    cy.get('[data-test-id="data"]').should('contain', 'Loaded channel: General')
+  })
+})

packages/vue-apollo-composable/src/useQuery.ts

@@ -53,7 +53,7 @@ interface SubscribeToMoreItem {
 }
 
 // Parameters
-export type DocumentParameter<TResult, TVariables = undefined> = DocumentNode | Ref<DocumentNode> | ReactiveFunction<DocumentNode> | TypedDocumentNode<TResult, TVariables> | Ref<TypedDocumentNode<TResult, TVariables>> | ReactiveFunction<TypedDocumentNode<TResult, TVariables>>
+export type DocumentParameter<TResult, TVariables> = DocumentNode | Ref<DocumentNode | null | undefined> | ReactiveFunction<DocumentNode | null | undefined> | TypedDocumentNode<TResult, TVariables> | Ref<TypedDocumentNode<TResult, TVariables> | null | undefined> | ReactiveFunction<TypedDocumentNode<TResult, TVariables> | null | undefined>
 export type VariablesParameter<TVariables> = TVariables | Ref<TVariables> | ReactiveFunction<TVariables>
 export type OptionsParameter<TResult, TVariables extends OperationVariables> = UseQueryOptions<TResult, TVariables> | Ref<UseQueryOptions<TResult, TVariables>> | ReactiveFunction<UseQueryOptions<TResult, TVariables>>
 
@@ -67,7 +67,7 @@ export interface UseQueryReturn<TResult, TVariables extends OperationVariables>
   stop: () => void
   restart: () => void
   forceDisabled: Ref<boolean>
-  document: Ref<DocumentNode>
+  document: Ref<DocumentNode | null | undefined>
   variables: Ref<TVariables | undefined>
   options: UseQueryOptions<TResult, TVariables> | Ref<UseQueryOptions<TResult, TVariables>>
   query: Ref<ObservableQuery<TResult, TVariables> | null | undefined>
@@ -437,13 +437,13 @@ export function useQueryImpl<
   }
 
   // Applying document
-  let currentDocument: DocumentNode = documentRef.value
+  let currentDocument: DocumentNode | null | undefined = documentRef.value
 
   // 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)
+  const isEnabled = computed(() => enabledOption.value && !forceDisabled.value && !!documentRef.value)
 
   // Applying options first (in case it disables the query)
   watch(() => unref(optionsRef), value => {