Setting up a Vue CLI project with Vue Apollo

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 

import { ApolloClient } from 'apollo-client' import { createHttpLink } from 'apollo-link-http' import { InMemoryCache } from 'apollo-cache-inmemory' // HTTP connection to the API const httpLink = createHttpLink({ // 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, }) 

import Vue from 'vue' import VueApollo from 'vue-apollo' Vue.use(VueApollo) 

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

//apollo.js  // This is everything we need to work with Apollo 2.0. 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"; // Register the VueApollo plugin with Vue. Vue.use(VueApollo); // Create a new HttpLink to connect to your GraphQL API. // According to the Apollo docs, this should be an absolute URI. const httpLink = new HttpLink({ uri: `http://localhost:3020/graphql` }); // I'm creating another variable here just because it makes it easier to add more links in the future. const link = httpLink; // Create the apollo client const apolloClient = new ApolloClient({ // Tells Apollo to use the link chain with the http link we set up. link, // Handles caching of results and mutations. cache: new InMemoryCache(), // Useful if you have the Apollo DevTools installed in your browser. connectToDevTools: true }); const apolloProvider = new VueApollo({ // Apollo 2.0 allows multiple clients to be enabled at once. // Here we select the default (and only) client. defaultClient: apolloClient }); export default apolloProvider; 

//main.js import Vue from "vue"; import App from "./App.vue"; import apolloProvider from "./graphql/apollo"; new Vue({ el: '#app', // inject apolloProvider here like vue-router or vuex apolloProvider, render: h => h(App), })