Installation
Vue CLI Plugin
I made a plugin for vue-cli so you can add Apollo (with an optional GraphQL server!) in literally two minutes! â¨đ
In your vue-cli 3 project:
vue add apollo
Then you can skip to next section: Basic Usage.
Manual installation
1. Apollo Client
You can either use Apollo Boost or Apollo Client directly (more configuration work).
Apollo Boost
Apollo Boost is a zero-config way to start using Apollo Client. It includes some sensible defaults, such as our recommended InMemoryCache
and HttpLink
, which come configured for you with our recommended settings and it's perfect for starting to develop fast.
Install it alongside vue-apollo
and graphql
:
npm install --save vue-apollo graphql apollo-boost
Or:
yarn add vue-apollo graphql apollo-boost
In your app, create an ApolloClient
instance:
import ApolloClient from "apollo-boost"
const apolloProvider = new ApolloClient({
// You should use an absolute URL here
uri: "https://api.graphcms.com/simple/v1/awesomeTalksClone"
})
Apollo client full configuration
If you want some more fine grained control install these packages instead of apollo-boost:
npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
Or:
yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
In your app, create an ApolloClient
instance:
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
// HTTP connexion to the API
const httpLink = new HttpLink({
// You should use an absolute URL here
uri: 'http://localhost:3020/graphql',
})
// Cache implementation
const cache = new InMemoryCache()
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
2. Install the plugin into Vue
import Vue from 'vue'
import VueApollo from "vue-apollo"
Vue.use(VueApollo)
3. Apollo provider
The provider holds the Apollo client instances that can then be used by all the child components.
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
Add it to your app with the apolloProvider
option:
new Vue({
el: '#app',
// inject apolloProvider here like vue-router or vuex
apolloProvider,
render: h => h(App),
})
You are now ready to use Apollo in your components!