Skip to content

Instantly share code, notes, and snippets.

@Akryum
Last active November 13, 2019 02:28
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Akryum/1984037622a80deca17ab78708648671 to your computer and use it in GitHub Desktop.
Save Akryum/1984037622a80deca17ab78708648671 to your computer and use it in GitHub Desktop.
Example Vue component using Apollo and GraphQL
<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>
@robertpro
Copy link

How can I configure the GraphQL server ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment