【Gatsby × contentful】page生成にFileSystemRouteAPIを使う

Copy
{
  "dependencies": {
    "@babel/preset-react": "^7.17.12",
    "@emotion/babel-plugin": "^11.9.2",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mdx-js/mdx": "1.6.22",
    "@mdx-js/react": "1.6.22",
    "dotenv": "^16.0.2",
    "gatsby": "^4.14.1",
    "gatsby-plugin-emotion": "^7.14.0",
    "gatsby-plugin-feed": "^4.14.0",
    "gatsby-plugin-gatsby-cloud": "^4.14.0",
    "gatsby-plugin-google-analytics": "^4.14.0",
    "gatsby-plugin-image": "^2.24.0",
    "gatsby-plugin-manifest": "^4.14.0",
    "gatsby-plugin-mdx": "3.20.0",
    "gatsby-plugin-offline": "^5.14.1",
    "gatsby-plugin-react-helmet": "^5.14.0",
    "gatsby-plugin-sharp": "^4.14.1",
    "gatsby-remark-copy-linked-files": "^5.14.0",
    "gatsby-remark-images": "^6.14.0",
    "gatsby-remark-prismjs": "^6.14.0",
    "gatsby-remark-responsive-iframe": "^5.14.0",
    "gatsby-remark-smartypants": "^5.14.0",
    "gatsby-source-contentful": "^7.21.1",
    "gatsby-source-filesystem": "^4.14.0",
    "gatsby-transformer-sharp": "^4.14.0",
    "prismjs": "^1.28.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.75"
  },
  "devDependencies": {
    "prettier": "^2.6.2"
  },
}

Copy
const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions

// contentful記事のkeyを取得
const contentfulAirticleResult = await graphql(`
  query airticleQuery {
    allContentfulBlogPost {
      edges {
        node {
          slug
        }
      }
    }
  }
`)

const contentfulAirticle =
  contentfulAirticleResult.data.allContentfulBlogPost.edges
//記事数分ループして記事ページを作成する
contentfulAirticle.forEach(({ node }) => {
  createPage({
    path: `${node.slug}/`, //記事ページのurl
    component: path.resolve(`./src/templates/contentfulPost.jsx`), //記事ページ作成のtemplateコンポーネント
    //templateコンポーネントに渡す引数
    context: {
      slug: node.slug,
    },
  })
})
}

Copy
import React from "react"
import { graphql, Link } from "gatsby"
import MDXConvert from "../components/mdxConvert"

const ContentfulPost = ({ data }) => {
  const post = data.allContentfulBlogPost.edges[0].node
  const { body } = post

  return (
    <div>
      <MDXConvert>{body.childMdx.body}</MDXConvert>
    </div>
  )
}

export default ContentfulPost

// gatsby-node.jsのcreatePageから渡されたslugを元にGraphQLで記事を取得
export const query = graphql`
  query Query($slug: String!) {
    allContentfulBlogPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          body {
            childMdx {
              tableOfContents
              body
            }
          }
        }
      }
    }
  }
`

Copy
import React from "react"
import { graphql, Link } from "gatsby"
import MDXConvert from "../../components/mdxConvert"

const ContentfulPost = ({ data }) => {
  const post = data.allContentfulBlogPost.edges[0].node
  const { body } = post

  return (
    <div>
      <MDXConvert>{body.childMdx.body}</MDXConvert>
    </div>
  )
}

export default ContentfulPost

// ファイル名から自動生成され実行されたGraphQLから
//渡されたslugを元にGraphQLで記事を取得
export const query = graphql`
  query Query($slug: String!) {
    allContentfulBlogPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          body {
            childMdx {
              tableOfContents
              body
            }
          }
        }
      }
    }
  }
`