As you know, MDG is working on an awesome new data layer called Apollo. Why not use it with another amazing technology like VueJS?
To do just that, I created an npm package that allows you to write GraphQL queries in your Vue components while using Apollo under the hood: vue-apollo
Use it in your Vue app
Install the package in your project folder alongside the other apollo dependencies, for example:
npm instal --save apollo-client vue-apollo
In your app code, create the Apollo client and install the Vue plugin before starting Vue:
import Vue from 'vue';
import ApolloClient, { createNetworkInterface, addTypename } from './apollo-client';
import VueApollo from 'vue-apollo';
// Create the apollo client
const apolloClient = new ApolloClient({
networkInterface: createNetworkInterface({
uri: 'http://localhost:8080/graphql', // GraphQL server
transportBatching: true,
}),
queryTransformer: addTypename,
});
// Install the vue plugin
Vue.use(VueApollo, {
apolloClient,
});
// Now you can start your Vue app
Then you can use apollo directly in your components:
import gql from 'graphql-tag';
// GraphQL query
const postsQuery = gql`
query allPosts {
posts {
id
title
votes
author {
id
firstName
lastName
}
}
}
`;
// Component def
export default {
components: {
// Local state
data: () => ({
posts: [],
loading: 0,
}),
// Apollo GraphQL
apollo: {
// Local state 'posts' data
posts: {
query: postsQuery,
loadingKey: 'loading',
},
},
};
You can take a look at the hello world example.
Feel free to comment and make suggestions!
