diff --git a/packages/test-e2e-composable-vue3/src/components/NullQuery.vue b/packages/test-e2e-composable-vue3/src/components/NullQuery.vue new file mode 100644 index 00000000..56d1e095 --- /dev/null +++ b/packages/test-e2e-composable-vue3/src/components/NullQuery.vue @@ -0,0 +1,69 @@ + + + + + + + Load channel + + + + + Loading... + + + + Loaded channel: {{ channel.label }} + Messages: {{ channel.messages.length }} + + + diff --git a/packages/test-e2e-composable-vue3/src/router.ts b/packages/test-e2e-composable-vue3/src/router.ts index 9bf3f149..74e387be 100644 --- a/packages/test-e2e-composable-vue3/src/router.ts +++ b/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'), + }, ], }) diff --git a/packages/test-e2e-composable-vue3/tests/e2e/specs/nullableQuery.cy.js b/packages/test-e2e-composable-vue3/tests/e2e/specs/nullableQuery.cy.js new file mode 100644 index 00000000..10faba76 --- /dev/null +++ b/packages/test-e2e-composable-vue3/tests/e2e/specs/nullableQuery.cy.js @@ -0,0 +1,17 @@ +/// + +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') + }) +}) diff --git a/packages/vue-apollo-composable/src/useQuery.ts b/packages/vue-apollo-composable/src/useQuery.ts index 3e1aac64..915f3cb3 100644 --- a/packages/vue-apollo-composable/src/useQuery.ts +++ b/packages/vue-apollo-composable/src/useQuery.ts @@ -53,7 +53,7 @@ interface SubscribeToMoreItem { } // Parameters -export type DocumentParameter = DocumentNode | Ref | ReactiveFunction | TypedDocumentNode | Ref> | ReactiveFunction> +export type DocumentParameter = DocumentNode | Ref | ReactiveFunction | TypedDocumentNode | Ref | null | undefined> | ReactiveFunction | null | undefined> export type VariablesParameter = TVariables | Ref | ReactiveFunction export type OptionsParameter = UseQueryOptions | Ref> | ReactiveFunction> @@ -67,7 +67,7 @@ export interface UseQueryReturn stop: () => void restart: () => void forceDisabled: Ref - document: Ref + document: Ref variables: Ref options: UseQueryOptions | Ref> query: Ref | 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 => {