Files
apollo/docs/guide/installation.md
T
Guillaume Chau 56f317af07 docs: big update
2018-06-18 18:11:46 +02:00

1.5 KiB

Installation

:::tip If you are using vue-cli 3.x, you can use this vue-cli plugin: it will install everything you need for you in a few minutes so you can start coding right away! :::

Try and install these packages before server side set (of packages), add apollo to meteor.js before then, too.

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

Apollo client

In your app, create an ApolloClient instance and install the VueApollo plugin:

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:3020/graphql',
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

// Install the vue plugin
Vue.use(VueApollo)

Apollo provider

The provider holds the apollo client instances that can then be used by all the child components. Inject it into your components with provide:

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

new Vue({
  el: '#app',
  provide: apolloProvider.provide(),
  render: h => h(App),
})