Skip to content

Instantly share code, notes, and snippets.

@yann-yinn
Last active October 21, 2020 08:53
Show Gist options
  • Save yann-yinn/8d52ea6a95c97fb4e6aa78617a91ed00 to your computer and use it in GitHub Desktop.
Save yann-yinn/8d52ea6a95c97fb4e6aa78617a91ed00 to your computer and use it in GitHub Desktop.
Fireblog basic vue example
<template>
<div id="app">
<div v-if="loadingState === 'PENDING'">Loading ...</div>
<div
v-if="loadingState === 'FINISHED'"
style="max-width: 700px; margin: auto"
>
<header style="margin-bottom: 40px; text-align: center">
<h1>{{ blog.name }}</h1>
<em>{{ blog.description }} </em>
</header>
<ul class="articles">
<li v-for="post in posts" :key="post._id">
<h2>{{ post.title }}</h2>
<p>{{ post.teaser }}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
import { gql } from "graphql-request";
import graphqlClient from "./utils/graphQLClient";
export default {
name: "App",
data() {
return {
loadingState: "NOT_STARTED",
posts: [],
blog: null,
};
},
methods: {
async fetchData() {
this.loadingState = "PENDING";
const query = gql`
query($blog: ID!, $skip: Int!, $limit: Int!) {
blog(filter: { _id: { eq: $blog } }) {
name
description
}
postsCount(filter: { blog: { eq: $blog } })
posts(
limit: $limit
skip: $skip
sort: { publishedAt: desc }
filter: { blog: { eq: $blog } }
) {
_id
slug
title
teaser
updatedAt
publishedAt
imageThumbnail: image(w: 800, h: 200, fit: crop) {
url
}
}
}
`;
const result = await graphqlClient.request(query, {
skip: 0,
limit: 20,
blog: "5e0cc6b2c96420000444d376",
});
this.blog = result.blog;
this.postsCount = result.postsCount;
this.posts = result.posts;
this.loadingState = "FINISHED";
return result;
},
},
mounted() {
this.fetchData();
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment