diff --git a/packages/docs/src/api/use-lazy-query.md b/packages/docs/src/api/use-lazy-query.md index 2f77e76..d70b88c 100644 --- a/packages/docs/src/api/use-lazy-query.md +++ b/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() + } + ``` diff --git a/packages/docs/src/guide-composable/query.md b/packages/docs/src/guide-composable/query.md index 40971e9..56c95b2 100644 --- a/packages/docs/src/guide-composable/query.md +++ b/packages/docs/src/guide-composable/query.md @@ -824,3 +824,20 @@ export default { ``` + +### 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() +} +``` diff --git a/packages/test-e2e-composable-vue3/src/components/LazyQuery.vue b/packages/test-e2e-composable-vue3/src/components/LazyQuery.vue index 2bb4fb9..873ae0f 100644 --- a/packages/test-e2e-composable-vue3/src/components/LazyQuery.vue +++ b/packages/test-e2e-composable-vue3/src/components/LazyQuery.vue @@ -1,20 +1,33 @@