fix: events not registered in case of immediate trigger, fix #1154

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

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import OnResultChild from './OnResultChild.vue'
+
+const visible = ref(false)
+</script>
+
+<template>
+  <div class="m-6">
+    <div>
+      <label>
+        <input
+          v-model="visible"
+          type="checkbox"
+        >
+        Show child component
+      </label>
+    </div>
+
+    <div v-if="visible">
+      <OnResultChild />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { ref } from 'vue'
+
+const { onResult, loading } = useQuery(gql`
+  query channel ($id: ID!) {
+    channel (id: $id) {
+      id
+      label
+      messages {
+        id
+        text
+      }
+    }
+  }
+`, {
+  id: 'general',
+})
+
+const channel = ref<any>(null)
+
+onResult((result) => {
+  channel.value = result.data?.channel
+})
+</script>
+
+<template>
+  <div class="m-6 border border-green-500 rounded">
+    <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

@@ -38,5 +38,9 @@ export const router = createRouter({
       path: '/disabled',
       component: () => import('./components/Disabled.vue'),
     },
+    {
+      path: '/on-result',
+      component: () => import('./components/OnResult.vue'),
+    },
   ],
 })

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

@@ -117,4 +117,15 @@ describe('Vue 3 + Apollo Composable', () => {
     cy.get('button').click()
     cy.get('[data-test-id="data"]').should('contain', 'Loaded channel: General')
   })
+
+  it('onResult with immediate result', () => {
+    cy.visit('/on-result')
+    cy.get('[data-test-id="data"]').should('not.exist')
+    cy.get('input[type="checkbox"]').click()
+    cy.get('[data-test-id="data"]').should('contain', 'Loaded channel: General')
+    cy.get('input[type="checkbox"]').click()
+    cy.get('[data-test-id="data"]').should('not.exist')
+    cy.get('input[type="checkbox"]').click()
+    cy.get('[data-test-id="data"]').should('contain', 'Loaded channel: General')
+  })
 })

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

@@ -292,7 +292,10 @@ export function useQueryImpl<
     result.value = queryResult.data && Object.keys(queryResult.data).length === 0 ? undefined : queryResult.data
     loading.value = queryResult.loading
     networkStatus.value = queryResult.networkStatus
-    resultEvent.trigger(queryResult)
+    // Wait for handlers to be registered
+    nextTick(() => {
+      resultEvent.trigger(queryResult)
+    })
   }
 
   function onError (queryError: unknown) {
@@ -322,7 +325,10 @@ export function useQueryImpl<
     error.value = apolloError
     loading.value = false
     networkStatus.value = 8
-    errorEvent.trigger(apolloError)
+    // Wait for handlers to be registered
+    nextTick(() => {
+      errorEvent.trigger(apolloError)
+    })
   }
 
   function resubscribeToQuery () {