Setting up a Vue CLI project with Vue Apollo

#graphql #vue #apollo

Today we’ll learn how to integrate apollo-client 2 with Vue.js using vue-apollo.

Installation

apollo-client has numbers of dependencies that need to be setup in your current Vue CLI project.

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

Usage

Set up an ApolloClient in our main.js.

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,
})

Install the VueApollo plugin into Vue

import Vue from 'vue'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

The ApolloProvider holds the Apollo client instances that can then be used by all the child components.

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

The final step

Extracting the apollo component to a single file, create a file called apollo.js in src/graphql/apollo.js and add

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

Add it to your app with the apolloProvider option, Now our main.js will look like:

//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),
})