API Reference

Vue Apollo ships two public packages. They are two ways to spell the same thing: the components are built on the composables and expose the same Apollo Client behaviour, so mixing them in one app, or in one component, is expected.

Package	Style	Reference
@vue/apollo-composable	<script setup> functions	Composable API
@vue/apollo-components	Template components with slots	Components API

Which one to use

Reach for composables when the data has to be available to script logic: computed properties derived from a result, watchers, imperative refetching, anything that has to run before render. useQuery returns refs you can read anywhere in setup, and it is the only way to use await for Suspense.

Reach for components when a template needs data and nothing else does. Loading, error and empty branches become named slots instead of v-if chains, and the query stops when the element unmounts. Components were the primary API in v4, so see migrating from v4 if you are upgrading.

<script setup lang="ts">
const { current } = useQuery(gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`)
</script>

<template>
  <div v-if="current.loading">
    Loading…
  </div>
  <ul v-else-if="current.resultState === 'complete'">
    <li v-for="user in current.result.users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ApolloQuery } from '@vue/apollo-components'
</script>

<template>
  <ApolloQuery
    :query="gql`
      query GetUsers {
        users {
          id
          name
        }
      }
    `"
  >
    <template #loading>
      Loading…
    </template>
    <template #data="{ data }">
      <ul>
        <li v-for="user in data.users" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
    </template>
  </ApolloQuery>
</template>

How the two references are generated

• Composable: TypeDoc over the published declaration files.
• Components: vue-component-meta, which attaches JSDoc to props, events and slot props.

Both are regenerated by pnpm api:generate and are not edited by hand.

Types

Every option and result type is namespaced under the function or component it belongs to: useQuery.Options, useMutation.Result, useFragment.Current. The namespaces are listed under @vue/apollo-composable, and the components' props link into them, since a component prop is almost always the matching composable option.

For writing typed documents, see TypeScript.