microCMSとの連携 個別ページの生成
gatsby v2まではgatsby-node.jsファイルで制御してたんですが、
v3からFile System Route APIが提供され簡単にかけるようになりました。
今でも複雑なページ生成は gatsby-node.jsを使用しますが、
今回は単純な生成などでFile System Route APIを利用します。
具体的にはディレクトリ・ファイル名に変数を入れることで自動でページの生成ができます。
# ファイルの作成
/pages 配下に作成します。
クエリにはblogsIdが引数として入るのでそれを使って指定します。
code:{microcmsBlogs.blogsId}.tsx
import * as React from "react"
import {graphql, PageProps} from "gatsby";
export default function BlogDetail({data}: PageProps<GatsbyTypes.BlogDetailQuery>) {
return (
<div>
{JSON.stringify(data)}
</div>
)
}
export const query = graphql`
query BlogDetail ($blogsId: String) {
microcmsBlogs(blogsId: {eq: $blogsId}) {
body
title
blogsId
}
}
`
# 生成されたページはどこ？
gatsby developでは存在しないページにアクセスしたときに開発者ページが表示されます。
そこでは生成されたページを一覧で見ることができます。
https://i.gyazo.com/30e246ad2271cc8dabcab1ababfb0e88.png
/ptfad21ol0が生成されたブログページです。
# リンクを作成
gatsbyでのサイト内リンクには Linkコンポーネントを利用します。
code:index.tsx
import * as React from "react"
import {graphql, PageProps, Link} from "gatsby";
// markup
const IndexPage = ({ data }: PageProps<GatsbyTypes.TopPageQuery>) => {
return (
<main>
<p>hello gatsby</p>
<ul>
{data.allMicrocmsBlogs.edges.map(({ node }) => (
<li key={node.blogsId}>
<Link to={node.blogsId ?? "/"}>
{node?.title && <p>{node.title}</p>}
{node?.body && <p dangerouslySetInnerHTML={{ __html: node.body }} />}
</Link>
</li>
))}
</ul>
</main>
)
}
export const query = graphql`
query TopPage {
allMicrocmsBlogs {
edges {
node {
title
body
blogsId
}
}
}
}
`
export default IndexPage
https://i.gyazo.com/cc11ca6ecc741d506b16a97c4b51d39d.png
https://gyazo.com/27df4d647b59de9ee310c7981a09dbcf