@vue/apollo-composable / useQuery

Function: useQuery()

useQuery(query, options?): Result & PromiseLike<Result>

A composable for executing GraphQL queries with full reactivity.

Parameters

query

MaybeRefOrGetter<DocumentNode>

A GraphQL document.

options?

MaybeRefOrGetter<Options>

Options to control how the query is executed.

Returns

Result & PromiseLike<Result>

Query result object with reactive refs.

Example

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

const GetUser = gql`query GetUser($id: ID!) { user(id: $id) { name } }`

const { current } = useQuery(GetUser, {
  variables: { id: '1' }
})
</script>

<template>
  <div v-if="current.loading">Loading...</div>
  <div v-else-if="current.error">Error: {{ error.message }}</div>
  <div v-else>{{ result }}</div>
</template>