Vue-apollo

by Guillaume Chau

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/apollo-client-browser@1.9.0"></script>
<script src="https://unpkg.com/vue-apollo@2.1.0-beta.19"></script>

<!-- App -->
<div id="app">
  <h1>Blog</h1>
  <div>
    <div v-if="loading" class="loading">Loading...</div>
    <article v-for="post of posts">
      <div class="title">{{ post.title }}</div>
      <div class="author">By {{ post.author.name }}</div>
    </article>
  </div>
</div>

CSS

body {
  font-family: sans-serif;
  margin: 0;
  background: #f0f0f0;
}

#app {
  padding: 24px;
  max-width: 400px;
  margin: auto;
}

h1 {
  text-align: center;
  font-weight: normal;
}

article {
  background: white;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 2px;
}

.loading {
  text-align: center;
  color: #777;
}

.title {
  text-transform: uppercase;
}

.author {
  color: #777;
}

JavaScript

console.clear()

const apolloClient = new Apollo.lib.ApolloClient({
  networkInterface: Apollo.lib.createNetworkInterface({
  	// Edit: https://launchpad.graphql.com/nnnwvmq07
    uri: 'https://nnnwvmq07.lp.gql.zone/graphql',
    transportBatching: true,
  }),
  connectToDevTools: true,
})

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

const POSTS_QUERY = Apollo.gql`
{
  posts {
    id
    title
    author {
      id
      name
    }
  }
}
`

// New VueJS instance
const app = new Vue({
  // CSS selector of the root DOM element
  el: '#app',
  data: {
  	posts: [],
    loading: 0,
  },
  // Apollo GraphQL
  apolloProvider,
  apollo: {
    posts: {
    	query: POSTS_QUERY,
      loadingKey: 'loading',
    },
  },
})