Use Apollo with VueJS


#1

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!


#2

Thanks @akryum,
Handling graphql requests in vue-apollo much easier for me than in react containers and finally I figured out how to use apollo, thanks to your package and docs.

I tried vue-apollo-meteor stack and I have a few questions:

  1. How about publications? New apollo client supports it, is it possible to integrate this with a vue-apollo?
  2. How expensive is ‘pollInterval’ in vue-apollo requests? Is there much difference on server resources usage compared to pub-sub?
  3. It would be great to have an example with optimistic UI for meteor and vue-apollo. I see that the functional is there, but it’s quite difficult to connect it with mongo-meteor, based on an example with the plain js object in the docs. It would be nice to have something as this repo https://github.com/Akryum/meteor-vue-component fully based on the vue-apollo-meteor example.

Thanks!


#3

This is planned. :slight_smile:

I think it depends on a lot of factors, but I would personally recommend pub/sub over polling.


#4

@akryum I want to say thanks for writing vue-apollo’s documentation. I’d struggled with Apollo for a long time (and still am) but the first time I got anything working even a little bit, it was from following your docs. Keep it up!


#5

Thank you very much for your kind message! Very happy to have helped you! :smile:


#6

Hi, thanks for this awesome project @akryum ! Could this fully replace meteor-vue-tracker? Is there any news on the publications/subscriptions part. Would love to try it out. :slight_smile:


#7

Apollo has its own real-time subscriptions system that you can already use today. :slight_smile: