<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>