feat: useLazyQuery load returns boolean to make is easier to refetch

packages/docs/src/api/use-lazy-query.md

@@ -4,4 +4,14 @@ Extends [useQuery](./use-query.md)
 
 ## Additional Return
 
-- `load(document?, variables?, options?)`: function to start querying.
+- `load(document?, variables?, options?)`: function to start querying. Returns `true` if it is the first time the query is called, `false` otherwise.
+
+    Example:
+
+    ```js
+    const { load, refetch } = useLazyQuery(query, variables, options)
+
+    function fetchMyData () {
+      load() || refetch()
+    }
+    ```

packages/docs/src/guide-composable/query.md

@@ -824,3 +824,20 @@ export default {
   </div>
 </template>
 ```
+
+### Refetch lazy query
+
+`load()` returns `true` if it is the first time the query is activated, `false` otherwise. You can use this to refetch the query with `refetch()` in case the user clicks on the button again, meaning `load()` returns `false`.
+
+```js
+const { result, load, refetch } = useLazyQuery(gql`
+  query list {
+    list
+  }
+`)
+// ...
+
+function loadOrRefetch () {
+  load() || refetch()
+}
+```

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

@@ -1,20 +1,33 @@
 <script lang="ts">
 import gql from 'graphql-tag'
 import { useLazyQuery } from '@vue/apollo-composable'
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, ref } from 'vue'
 
 export default defineComponent({
   setup () {
-    const { result, load } = useLazyQuery(gql`
+    const { result, loading, load, refetch } = useLazyQuery(gql`
       query list {
         list
       }
     `)
     const list = computed(() => result.value?.list ?? [])
 
+    const refetched = ref(false)
+
+    function r () {
+      refetched.value = true
+      refetch()
+    }
+
+    function loadOrRefetch () {
+      load() || r()
+    }
+
     return {
-      load,
+      loadOrRefetch,
+      loading,
       list,
+      refetched,
     }
   },
 })
@@ -22,12 +35,25 @@ export default defineComponent({
 
 <template>
   <div class="m-6">
-    <button
-      class="bg-green-200 rounded-lg p-4"
-      @click="load()"
+    <div>
+      <button
+        class="bg-green-200 rounded-lg p-4"
+        @click="loadOrRefetch()"
+      >
+        Load list
+      </button>
+
+      <span data-test-id="refetched">
+        Refetched: {{ refetched }}
+      </span>
+    </div>
+
+    <div
+      v-if="loading"
+      class="loading"
     >
-      Load list
-    </button>
+      Loading...
+    </div>
 
     <ul class="my-4">
       <li

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

@@ -90,9 +90,23 @@ describe('Vue 3 + Apollo Composable', () => {
     cy.visit('/lazy-query')
     cy.get('.list-disc').should('have.length', 0)
     cy.get('button').click()
+    cy.get('.loading').should('be.visible')
+    cy.get('.loading').should('not.exist')
     cy.get('.list-disc').should('have.length', 3)
     cy.get('.list-disc').should('contain', 'a')
     cy.get('.list-disc').should('contain', 'b')
     cy.get('.list-disc').should('contain', 'c')
   })
+
+  it('useLazyQuery refetch', () => {
+    cy.visit('/lazy-query')
+    cy.get('button').click()
+    cy.get('.list-disc').should('have.length', 3)
+    cy.get('[data-test-id="refetched"]').should('contain', 'false')
+    cy.get('button').click()
+    cy.get('.loading').should('be.visible')
+    cy.get('.loading').should('not.exist')
+    cy.get('.list-disc').should('have.length', 3)
+    cy.get('[data-test-id="refetched"]').should('contain', 'true')
+  })
 })

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

@@ -27,7 +27,9 @@ export function useLazyQuery<
     if (options) {
       Object.assign(isRef(query.options) ? query.options.value : query.options, options)
     }
+    const oldForceDisabled = query.forceDisabled.value
     query.forceDisabled.value = false
+    return oldForceDisabled
   }
 
   return {