import React from 'react'
import { Link , StaticQuery, graphql } from "gatsby"
import Layout from "./layout"

export default ({data,...props}) => {
   console.log(props)
  return (
    <Layout>
      <h1>{data.post.title}</h1>
      <p>{data.post.description}</p>
      <h1><code>Thao luan ve gatsby</code></h1>
      <div>
         {
            data.allComment.nodes.map(cmt => (
               <div key={cmt.id}>
                  <h2>{cmt.comment}</h2>
                  <p>{cmt.user.displayName}</p>
               </div>
            ))
         }
      </div>
    </Layout>
  )
}

export const query = graphql`
  query Post($slug: StringQueryOperatorInput){
    post(id: $slug) {
      id
      title
      description
      user {
        photoURL
        displayName
      }
    }
    allComment(filter: {post: {id: $slug}}, limit: 5,sort: {fields: createdAt, order: DESC}) {
      totalCount
      nodes {
        id
        comment
        user {
          displayName
          photoURL
        }
      }
    }
  }
`