fancy-blog-with-graphcms

[slug].tsx

interface Props {
  post: Post
}

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getAllPosts({
    locales: ['en'],
  })

  return {
    paths: posts.map((post) => ({
      params: { slug: post.slug },
    })),
    fallback: false,
  }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const post = await getPost({
    locales: ['en'],
    slug: params.slug as string,
  })

  return {
    props: {
      post,
    },
  }
}

const PostPage: FC<Props> = ({ post }) => {
  return (
    <Layout seo={{ title: post.title }}>
      <article className="blogContent">
        <h1>{post.title}</h1>
        <Author
          name={post.author.name}
          picture={post.author.picture.url}
          date={post.date}
        />
        <Divider />
        <img className={styles.coverImage} src={post.cover.url} alt="cover" />
        <ReactMarkdown remarkPlugins={[gfm]} components={{ code: CodeBlock }}>
          {post.content}
        </ReactMarkdown>
      </article>
    </Layout>
  )
}

export default PostPage

getPost.tsx

type getPostParams = {
  slug: string
  locales: string[]
}

export const getPostQuery = gql`
  query PostQuery($slug: String!, $locales: [Locale!]!) {
    post(where: { slug: $slug }, locales: $locales) {
      id
      title
      slug
      views
      content
      date
      cover {
        url
      }
      author {
        name
        picture {
          url
        }
      }
    }
  }
`

async function getPost({
  slug,
  locales = ['en'],
}: getPostParams): Promise<Post> {
  const { post } = await graphcmsClient.request(getPostQuery, {
    slug,
    locales,
  })

  return post
}

export default getPost