Today we’ll learn how to integrate
apollo-client 2
with Vue.js usingvue-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),
})
You are now ready to use Apollo in your components!
For more details, see the documentation on apollo-vue and Apollo.
Top comments (0)