How to use useQuery from inside of a function?

[martinszeltins]

How can I use useQuery from inside of a function and still have access to result and loading in my template? For example here I do not have access to results or loading from my template because they are defined withing the loadData function and I need to load the data only when the user clicks the button.

Also, ideally, I want to move my useQuery to a different file like usersApi.js and then call usersApi.getUsers()

<template>
  <button @click="loadData">Load data</button>

  <div v-if="loading">Loading...</div>

  <ul v-else-if="result && result.users">
    <li v-for="user of result.users" :key="user.id">
      {{ user.firstname }} {{ user.lastname }}
    </li>
  </ul>
</template>

<script setup>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'

const loadData = () => {
  const { result, loading } = useQuery(gql`
    query getUsers {
      users {
        id
        firstname
        lastname
        email
      }
    }
  `)
}
</script>

[wreality]

Check out of the docs for useLazyQuery: https://v4.apollo.vuejs.org/guide-composable/query.html#lazy-query

Basically:

<template>
  <button @click="load">Load data</button>

  <div v-if="loading">Loading...</div>

  <ul v-else-if="result && result.users">
    <li v-for="user of result.users" :key="user.id">
      {{ user.firstname }} {{ user.lastname }}
    </li>
  </ul>
</template>

<script setup>
import { useLazyQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'

const {result, load, loading} = useLazyQuery(gql`
    query getUsers {
      users {
        id
        firstname
        lastname
        email
      }
    }
  `)
}
</script>

[martinszeltins]

@wreality how would you extract this useLazyQuery to a different file and use it in a component?

[wreality]

Essentially, make your own composable:

userApi.js

import { useLazyQuery } from '@vue/apollo-composable'

export function useUserApi() {
return useLazyQuery(gql`
    query getUsers {
      users {
        id
        firstname
        lastname
        email
      }
    }
  `)
}

Component:

<template>
  <button @click="load">Load data</button>

  <div v-if="loading">Loading...</div>

  <ul v-else-if="result && result.users">
    <li v-for="user of result.users" :key="user.id">
      {{ user.firstname }} {{ user.lastname }}
    </li>
  </ul>
</template>

<script setup>
import { useUserApi } from 'userApi'
import gql from 'graphql-tag'

const {result, load, loading} = useUserApi()

</script>