Introduction

Vue Apollo is the official Apollo Client integration for Vue.js. It lets you manage local and remote GraphQL data through Vue's reactivity system.

Ready to try it out? Skip to the Installation.

Two APIs, one library

Vue Apollo ships two packages, and the selector at the top of the sidebar switches this guide between them:

Package	What you write	Reach for it when
@vue/apollo-composable	useQuery and friends in <script setup>	The data feeds script logic: computed values, watchers, await for Suspense
@vue/apollo-components	<ApolloQuery> and friends in the template	Only the template needs the data, and loading, error and empty branches should be slots

Both share one client and one cache, so the choice is per component, not per project. See the API overview for the longer comparison.

Features

• Declarative data fetching. Write a query, receive reactive data.
• Automatic caching. Apollo's normalized cache serves repeated queries instantly and keeps all queries that read the same entity in sync.
• Real-time updates through subscriptions and the @defer and @stream directives.
• Full TypeScript support with GraphQL Codegen integration.
• Vue-native reactivity. Variables can be refs, reactive objects, or getters; query results are refs you read from templates.

Quick example

<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>

Compatibility

Package	Version
Vue	3.5+
Apollo Client	4.1+

Vue 2 is no longer supported. See What's changed in v5.

Apollo Client 4.1 required

Vue Apollo requires @apollo/client version 4.1.0 or higher. The features Vue Apollo depends on (improved TypeScript inference, the DataState discriminated union, incremental delivery handlers) are only available from 4.1 onward.

Sponsors

Sponsor on GitHub