From ff4c6d237e2fb6f91d76fb2179dfc47b41abb601 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Mon, 2 May 2022 17:52:38 +0200
Subject: [PATCH] docs: useLazyQuery

---
 packages/docs/src/.vuepress/config.js       |  1 +
 packages/docs/src/api/use-lazy-query.md     |  7 +++
 packages/docs/src/guide-composable/query.md | 51 +++++++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 packages/docs/src/api/use-lazy-query.md

diff --git a/packages/docs/src/.vuepress/config.js b/packages/docs/src/.vuepress/config.js
index d928ba4..644c967 100644
--- a/packages/docs/src/.vuepress/config.js
+++ b/packages/docs/src/.vuepress/config.js
@@ -184,6 +184,7 @@ module.exports = {
               collapsable: false,
               children: [
                 'use-query',
+                'use-lazy-query',
                 'use-mutation',
                 'use-subscription',
                 'use-result',
diff --git a/packages/docs/src/api/use-lazy-query.md b/packages/docs/src/api/use-lazy-query.md
new file mode 100644
index 0000000..81b046d
--- /dev/null
+++ b/packages/docs/src/api/use-lazy-query.md
@@ -0,0 +1,7 @@
+# useLazyQuery
+
+Extends [useQuery](./use-query.md)
+
+## Additional Return
+
+- `load`: function to start querying.
diff --git a/packages/docs/src/guide-composable/query.md b/packages/docs/src/guide-composable/query.md
index e4c726b..39d5337 100644
--- a/packages/docs/src/guide-composable/query.md
+++ b/packages/docs/src/guide-composable/query.md
@@ -773,3 +773,54 @@ onError(error => {
 ```
 
 That way it will be dropped when compiling the project for production.
+
+## Lazy query
+
+If you need to wait before starting a query, you can use `useLazyQuery` instead of `useQuery`. It returns an additional `load` function to start querying your API.
+
+Example:
+
+```vue{4,8,16,27}
+<script>
+import { computed } from 'vue'
+import gql from 'graphql-tag'
+import { useLazyQuery } from '@vue/apollo-composable'
+
+export default {
+  setup () {
+    const { result, load } = useLazyQuery(gql`
+      query list {
+        list
+      }
+    `)
+    const list = computed(() => result.value?.list ?? [])
+
+    return {
+      load,
+      list,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="m-6">
+    <button
+      class="bg-green-200 rounded-lg p-4"
+      @click="load()"
+    >
+      Load list
+    </button>
+
+    <ul class="my-4">
+      <li
+        v-for="(item, index) of list"
+        :key="index"
+        class="list-disc ml-6"
+      >
+        {{ item }}
+      </li>
+    </ul>
+  </div>
+</template>
+```