manually createPage for tag pages

Author: cometkim

gatsby-node.js

@@ -85,6 +85,9 @@ exports.onCreatePage = async ({ page, actions }) => {
   if (page.path.startsWith('/blog')) {
     return;
   }
+  if (page.path.startsWith('/tags')) {
+    return;
+  }
 
   const { createPage, deletePage } = actions
   deletePage(page)
@@ -228,8 +231,8 @@ exports.createPages = async ({ graphql, actions }) => {
           }
         }
       }
-      tagsGroup: allMarkdownRemark {
-        group(field: frontmatter___tags) {
+      allBlogPost {
+        group(field: tags) {
           fieldValue
         }
       }
@@ -244,6 +247,17 @@ exports.createPages = async ({ graphql, actions }) => {
     throw result.errors
   }
 
+  const tags = result.data.allBlogPost.group.map(group => group.fieldValue)
+  tags.forEach(tag => {
+    createPage({
+      path: `/tags/${tag.toLowerCase()}/`,
+      component: path.resolve("./src/templates/{BlogPost.tags}.tsx"),
+      context: {
+        tag,
+      },
+    })
+  })
+
   const markdownPages = result.data.allMarkdownRemark.edges
 
   // foundation: [

src/pages/tags/{BlogPost.tags}.tsx renamed to src/templates/{BlogPost.tags}.tsx

@@ -1,14 +1,14 @@
 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"
+import Layout from "../components/Layout"
+import BlogPostPreview from "../components/BlogPostPreview"
+import BlogSidebar from "../components/BlogSidebar"
 
 export const query = graphql`
-  query TagPage($tags: [String!]!) {
+  query TagPage($tag: String!) {
     allBlogPost(
-      filter: { tags: { in: $tags } }
+      filter: { tags: { in: [$tag] } }
     ) {
       nodes {
         id
@@ -20,8 +20,8 @@ export const query = graphql`
 
 type Props = PageProps<GatsbyTypes.TagPageQuery, GatsbyTypes.SitePageContext>
 
-const TagPage: React.FC<Props> = ({ data, params }) => {
-  const currentTag = params.tags!
+const TagPage: React.FC<Props> = ({ data, pageContext }) => {
+  const currentTag = pageContext.tag!
   return (
     <Layout title={`Blog: ${currentTag} | GraphQL`} pageContext={{}}>
       <section>