【GatsbyJS製ブログ】ページを作るcreatePageの仕組みを理解する

createPage({
  path: "（作るページのパス）",
  component: path.resolve(`（ページ作成のためのテンプレートファイルのパス）`),
  context: {
    （↑のテンプレートファイルへ渡すprops）
  },
})

…
const blogPost = path.resolve(`./src/templates/blog-post.js`) //あらかじめ「blogPost」にブログ記事のテンプレートを入れとく
…
const result = await graphql(` //GraphQLでマークダウンのidとslugを取得
    {
      allMarkdownRemark(sort: { frontmatter: { date: ASC } }, limit: 1000) {
        nodes {
          id
          fields {
            slug
          }
        }
      }
    }
  `)
…
  const posts = result.data.allMarkdownRemark.nodes //postsにGraphQLのnode情報だけ入れとく

  if (posts.length > 0) {
    posts.forEach((post, index) => {
      const previousPostId = index === 0 ? null : posts[index - 1].id 
　　　　//↑ここは前の投稿のIDを取得するロジック。前の投稿のIDを取得してテンプレートに渡すことで、よくある「前の記事」のリンクに使う。
      const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id
      //↑同様に次の投稿のIDを取得する。

      createPage({
        path: post.fields.slug, //pathはGraphQLから取得したslugから作る
        component: blogPost, //あらかじめ入れておいたテンプレートのパスをこのような形でも指定できる。
        context: {
          id: post.id, //各記事のIDが個別に渡される
          previousPostId, //その記事の前のID
          nextPostId, //その記事の次のID
        },
      })
    })
  }
}
…

…
export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String! //こんな感じでcontextからもらった値を…
    $previousPostId: String //同上
    $nextPostId: String //同上
  ) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(id: { eq: $id }) { //フィルターの条件として使える
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
    previous: markdownRemark(id: { eq: $previousPostId }) { //これも同じ
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) { //これも同じ
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
  }
`