Gastsby製の静的ブログにユーザー概念を作った

- id: "sadnessOjisan"
  name: "sadnessOjisan"
  image: "sadnessOjisan"
  description: "都内在住のフリーランスエンジニアです。フロントエンドとNode.js(ビルドツールチェイン+バックエンド)とFirebaseが得意です。プログラミング修行中のため仕事は引き受けておりませんが、技術的な挑戦がある仕事なら引き受けたいのでTwitterDMで連絡をいただけると幸いです。"
  twitterId: "sadnessOjisan"
  gitHubId: "sadnessOjisan"

const yaml = require("js-yaml")

const ymlDoc = yaml.safeLoad(
  fs.readFileSync("./src/contents/user.yaml", "utf-8")
)

ymlDoc.forEach(element => {
  createPage({
    path: `/users/${element.id}`,
    component: userTemplate,
    context: { userId: element.id, ...element },
  })
})

---
path: /user-in-ssg-blog
created: "2020-08-09 09:00"
title: 静的ブログにユーザー概念を作った
visual: "./visual.png"
tags: [Gatsby]
userId: sadnessOjisan
isProtect: false
---

// 記事ページ生成
contentsResult.data.posts.edges.forEach(({ node }) => {
  // HINT: もしwriteUserが存在しなければ例外が発生してビルドが落ちるはず => 記事とユーザーが紐づいていない。
  const writeUser = ymlDoc.filter(
    item => item.id === node.frontmatter.userId
  )[0]
  createPage({
    path: node.frontmatter.path,
    component: blogPostTemplate,
    context: { userId: writeUser.id, ...writeUser },
  })
})

createPage({
  path: node.frontmatter.path,
  component: blogPostTemplate,
  context: { userId: writeUser.id, ...writeUser },
})

export const pageQuery = graphql`
  query AllPostsByUserId($userId: String!) {
    postsByUserId: allMarkdownRemark(
      filter: { frontmatter: { userId: { eq: $userId } } }
    ) {
      nodes {
        timeToRead
        frontmatter {
          title
          path
          visual {
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          created(formatString: "YYYY-MM-DD")
          tags
        }
      }
    }
  }
`;