0Pricing
Vue Academy · Lesson

Apollo Client Setup in Vue 3

ApolloClient, InMemoryCache, provideApolloClient(), @vue/apollo-composable setup.

Apollo Client Setup in Vue 3 is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

GraphQL With Vue

GraphQL lets the client ask for exactly the data it needs in one request. Apollo Client is the most popular GraphQL client, and @vue/apollo-composable integrates it with Vue 3's Composition API.

Installing the Packages

You need the Apollo core, the GraphQL parser, and the Vue composable layer.

npm install @apollo/client graphql @vue/apollo-composable

Creating the Client

An Apollo client needs a server uri and a cache. InMemoryCache stores query results so repeat reads are instant.

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const apolloClient = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
})

What the Cache Does

The InMemoryCache normalizes responses by entity id. When two queries return the same object, the cache stores it once, and updating it refreshes every view that uses it.

Providing the Client

Register the client app-wide so every component can run queries. The DefaultApolloClient injection key wires it into the Composition API.

import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp, provide, h } from 'vue'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
    return () => h(App)
  }
})

Multiple Clients

For several GraphQL endpoints, provide an ApolloClients map and name each client. Components choose one via the clientId option.

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

provide(ApolloClients, {
  default: apolloClient,
  analytics: analyticsClient
})

provideApolloClient

Outside a component setup — for example inside a composable — use provideApolloClient to make the client available to useQuery calls.

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

provideApolloClient(apolloClient)
// now useQuery works in this composable

Adding Auth Headers

Real APIs need an auth token. Configure headers in the client options, or use an Apollo link to attach the token to every request.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer ' + token
  }
})

Configuring Default Options

The defaultOptions field tunes behavior such as the default fetch policy — for example always reading from cache first.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: 'cache-and-network' }
  }
})

Writing Your First Query

Define a query with the gql template tag from @apollo/client/core. It parses the GraphQL string into a document Apollo understands.

import { gql } from '@apollo/client/core'

const GET_POSTS = gql(
  'query { posts { id title } }'
)

Verifying the Setup

Once the client is provided, any component can call useQuery with that document. If data flows back, your client and provider are wired correctly.

Quick Check

Test your knowledge of Apollo setup.

Recap

You set up Apollo in Vue 3:

  • Create an ApolloClient with a uri and InMemoryCache.
  • The cache normalizes results by entity id.
  • Provide it with DefaultApolloClient (or ApolloClients for many).
  • Use provideApolloClient inside composables; define queries with gql.

Frequently asked questions

Is the “Apollo Client Setup in Vue 3” lesson free?

Yes — the full text of “Apollo Client Setup in Vue 3” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Apollo Client Setup in Vue 3”?

ApolloClient, InMemoryCache, provideApolloClient(), @vue/apollo-composable setup. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Apollo Client Setup in Vue 3” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Apollo Client Setup in Vue 3
  2. useQuery for Data Fetching
  3. useMutation for Data Changes
  4. Real-Time Subscriptions with useSubscription
← Back to Vue Academy