From 53554b8444ab0bd7e2dd85d3c0560d782ab9bd35 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Tue, 16 May 2023 12:05:39 +0200
Subject: [PATCH] test: demo useLazyQuery with immediate load

---
 .../src/components/LazyQueryImmediatly.vue    | 49 +++++++++++++++++++
 .../test-e2e-composable-vue3/src/router.ts    |  4 ++
 2 files changed, 53 insertions(+)
 create mode 100644 packages/test-e2e-composable-vue3/src/components/LazyQueryImmediatly.vue

diff --git a/packages/test-e2e-composable-vue3/src/components/LazyQueryImmediatly.vue b/packages/test-e2e-composable-vue3/src/components/LazyQueryImmediatly.vue
new file mode 100644
index 0000000..3818620
--- /dev/null
+++ b/packages/test-e2e-composable-vue3/src/components/LazyQueryImmediatly.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+import gql from 'graphql-tag'
+import { useLazyQuery } from '@vue/apollo-composable'
+import { defineComponent, computed, reactive } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const { result, loading, load } = useLazyQuery(gql`
+      query channel ($id: ID!) {
+        channel (id: $id) {
+          id
+          label
+          messages {
+            id
+          }
+        }
+      }
+    `, {
+      id: 'general',
+    })
+    const channel = computed(() => result.value?.channel)
+
+    load(undefined, {
+      id: 'general',
+    })
+
+    return {
+      loading,
+      channel,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="m-6">
+    <div
+      v-if="loading"
+      class="loading"
+    >
+      Loading...
+    </div>
+
+    <div v-if="channel">
+      <div>Loaded channel: {{ channel.label }}</div>
+      <div>Messages: {{ channel.messages.length }}</div>
+    </div>
+  </div>
+</template>
diff --git a/packages/test-e2e-composable-vue3/src/router.ts b/packages/test-e2e-composable-vue3/src/router.ts
index 4468883..9f6eff9 100644
--- a/packages/test-e2e-composable-vue3/src/router.ts
+++ b/packages/test-e2e-composable-vue3/src/router.ts
@@ -26,6 +26,10 @@ export const router = createRouter({
       path: '/lazy-query',
       component: () => import('./components/LazyQuery.vue'),
     },
+    {
+      path: '/lazy-query-immediatly',
+      component: () => import('./components/LazyQueryImmediatly.vue'),
+    },
     {
       path: '/partial-error',
       component: () => import('./components/PartialError.vue'),