Fireblog basic vue example

App.vue

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