piotr-jura-udemy/laravel-graphql-vue-tailwind-course

{
    //
    "require": {
        "php": "^7.2.5",
        //
        "nuwave/lighthouse": "4.14.1"
    },
    //
}

"A date string with format `Y-m-d`, e.g. `2011-05-23`."
scalar Date @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date")

"A datetime string with format `Y-m-d H:i:s`, e.g. `2018-05-23 13:43:32`."
scalar DateTime
    @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTime")

"A datetime and timezone string in ISO 8601 format `Y-m-dTH:i:sO`, e.g. `2020-04-20T13:53:12+02:00`."
scalar DateTimeTz
    @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTimeTz")

type Query {
    users: [User!]! @paginate(defaultCount: 10)
    user(id: ID! @eq): User @find
    posts: [Post!]! @all
    post(id: ID! @eq): Post! @find
    topic(slug: String! @eq): Topic @find
}

type User {
    id: ID!
    name: String!
    email: String!
    avatar: String!
    created_at: DateTime!
    updated_at: DateTime!
    posts: [Post!]! @hasMany
}

type Topic {
    id: ID!
    name: String!
    slug: String!
    posts: [Post!]! @hasMany
}

type Post {
    id: ID!
    title: String!
    content: String!
    lead: String!
    created_at: DateTime!
    updated_at: DateTime!
    author: User! @belongsTo
    topic: Topic! @belongsTo
}

<template>
  <div class="container mx-auto px-4 w-full md:w-3/4 lg:w-3/5 xl:w-1/2 mt-20">
    <div v-if="$apollo.loading">Loading...</div>
    <div v-else>
      <div class="text-lg text-gray-600">
        By
        <router-link
          :to="{name: 'author', params: {id: post.author.id}}"
          class="underline hover:text-black"
        >{{ post.author.name }}</router-link>in
        <router-link
          :to="{name: 'topic', params: {slug: post.topic.slug}}"
          class="underline hover:text-black"
        >{{ post.topic.name }}</router-link>
        &nbsp;• {{ post.created_at | timeago }}
      </div>

      <h1 class="text-5xl mt-10 font-bold mb-12">{{ post.title }}</h1>

      <p class="text-gray-700 pb-3 mb-12 whitespace-pre-line">{{ post.content }}</p>

      <div class="mb-24 flex">
        <div class="mr-6">
          <img
            :src="'/storage/faces/' + post.author.avatar"
            alt="Author avatar"
            class="w-16 h-16 rounded-full"
          />
        </div>
        <div class="flex flex-col justify-center">
          <div class="text-xl text-gray-600">
            Written by
            <router-link
              :to="{name: 'author', params: {id: post.author.id}}"
              class="underline hover:text-black"
            >{{ post.author.name }}</router-link>
          </div>
          <div class="text-gray-600">
            Published in
            <router-link
              :to="{name: 'topic', params: {slug: post.topic.slug}}"
              class="underline hover:text-black"
            >{{ post.topic.name }}</router-link>
            &nbsp;on {{ post.created_at | longDate }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import gql from "graphql-tag";
export default {
  apollo: {
    post: {
      query: gql`
        query($id: ID!) {
          post(id: $id) {
            id
            title
            content
            created_at
            author {
              id
              name
              avatar
            }
            topic {
              name
              slug
            }
          }
        }
      `,
      variables() {
        return {
          id: this.$route.params.id
        };
      },
      error() {
        this.$router.push({ name: "404" });
      }
    }
  }
};
</script>