refactor tag page

Author: cometkim

gatsby-node.js

@@ -444,19 +444,6 @@ exports.createPages = async ({ graphql, actions }) => {
       },
     })
   })
-
-  // Create tag pages
-  const tagTemplate = path.resolve("src/templates/tags.tsx")
-  const tags = result.data.tagsGroup.group
-  tags.forEach(tag => {
-    createPage({
-      path: `/tags/${tag.fieldValue}/`,
-      component: tagTemplate,
-      context: {
-        tag: tag.fieldValue,
-      },
-    })
-  })
 }
 
 exports.onCreateWebpackConfig = ({ actions }) => {

src/components/BlogSidebar/index.tsx

@@ -45,9 +45,9 @@ const BlogSidebar: React.FC = () => {
             return (
               <li key={tag}>
                 {pathname === currentPath ? (
-                  tag
+                  formattedTag
                 ) : (
-                  <Link to={`/tags/${tag}`}>{formattedTag}</Link>
+                  <Link to={pathname}>{formattedTag}</Link>
                 )}
               </li>
             )

src/pages/blog/{BlogPost.postId}.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import type { PageProps } from "gatsby"
+import { graphql } from "gatsby"
+import Layout from "../../components/Layout"
+import BlogLayout from "../../components/BlogLayout"
+
+export const query = graphql`
+  query BlogPostPage($id: String!) {
+    blogPost(id: { eq: $id }) {
+      title
+      ...BlogLayout_post
+    }
+  }
+`
+
+type Props = PageProps<GatsbyTypes.BlogPostPageQuery, GatsbyTypes.SitePageContext>
+
+const BlogPostPage: React.FC<Props> = ({
+  data
+}) => {
+  // Always exist since it is collected by Gatsby filesystem route API
+  const post = data.blogPost!
+
+  return (
+    <Layout title={`${post.title} | GraphQL`} pageContext={{}}>
+      <BlogLayout post={post} />
+    </Layout>
+  )
+}
+
+export default BlogPostPage

src/pages/tags/{BlogPost.tags}.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import type { PageProps } from "gatsby"
+import { graphql } from "gatsby"
+import Layout from "../../components/Layout"
+import BlogPostPreview from "../../components/BlogPostPreview"
+import BlogSidebar from "../../components/BlogSidebar"
+
+export const query = graphql`
+  query TagPage($tags: [String!]!) {
+    allBlogPost(
+      filter: { tags: { in: $tags } }
+    ) {
+      nodes {
+        id
+        ...BlogPostPreview_post
+      }
+    }
+  }
+`
+
+type Props = PageProps<GatsbyTypes.TagPageQuery, GatsbyTypes.SitePageContext>
+
+const TagPage: React.FC<Props> = ({ data, params }) => {
+  const currentTag = params.tags!
+  return (
+    <Layout title={`Blog: ${currentTag} | GraphQL`} pageContext={{}}>
+      <section>
+        <div className="documentationContent">
+          <div>
+            {data.allBlogPost.nodes.map(post => (
+              <BlogPostPreview key={post.id} post={post} />
+            ))}
+          </div>
+          <BlogSidebar />
+        </div>
+      </section>
+    </Layout>
+  )
+}
+
+export default TagPage