Cacher is the code snippet organizer for pro developers

<script>
import gql from 'graphql-tag';

// GraphQL query
const postsQuery = gql`
  query allPosts {
    posts {
      id
      title
      votes
      author {
        id
        firstName
        lastName
      }
    }
  }
`;

// Vue component definition
export default {
  // Local state
  data: () => ({
    // You can initialize the 'posts' data here
    posts: [],
    loading: 0,
  }),
  // Apollo GraphQL
  apollo: {
    // Local state 'posts' data will be updated
    // by the GraphQL query result
    posts: {
      // GraphQL query
      query: postsQuery,
      // Will update the 'loading' attribute
      // +1 when a new query is loading
      // -1 when a query is completed
      loadingKey: 'loading',
    },
  },
};
</script>

<template>
  <div class="post-list">
    <!-- If there is one or more queries loading -->
    <template v-if="loading > 0">
      Loading
    </template>
    <!-- Actual view -->
    <template v-else>
      <ul>
        <!-- Post list items -->
        <li v-for="post in posts" :key="post.id">
          {{ post.title }} by
          {{ post.author.firstName }} {{ post.author.lastName }}
        </li>
      </ul>
    </template>
  </div>
</template>