Last active
November 13, 2019 02:28
-
-
Save Akryum/1984037622a80deca17ab78708648671 to your computer and use it in GitHub Desktop.
Example Vue component using Apollo and GraphQL
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How can I configure the GraphQL server ?