ProfileSkillsRomdomNotes
ProfileSkillsRomdomNotes
プロフィール/雑記/記事一覧/gatsby+cmsで動的にページを生成

gatsby+cmsで動的にページを生成

Created
2020/9/23 6:27
Tags
前にやった、contentfulからデータを取得してgatsby.jsでページを作成するやつ、やり方忘れたので思い出しながらまとめてみる。
以下の本に書いてあるやつなので、より詳しく知りたい方は購入をおすすめします。なかなか良い本でした。

contentful上で記事を作成

割愛

GraphQLでcontentfulのデータを扱えるようにする

Bash
JavaScript
http://localhost:8000/___graphql を開いてallContentful~、contentful~ という項目が増えていることを確認。

記事のテンプレートファイルを作成

Bash
https://localhost:8000/__graphql を開いてクエリを作成し、テンプレートファイル下部に貼り付け。
JavaScript

gatsby-node.jsを作成

Bash
Gatsbyがページを生成する際、特定のタイミングやイベントに合わせて処理をさせたいケースがあります。そうした処理を設定するのがgatsby-node.jsです。
GatsbyNodeAPIとして様々なAPIが用意されており、関数の形でexportすることで利用します。ここではcreatePagesを使います。
JavaScript

クエリを生成する

http://localhost:8000/___graphql を開く
allContentfulBlogPost > edges > node > id, slug あたりにチェックを入れてクエリを生成

クエリを追加する

生成したクエリをgatsby-node.jsに追加。クエリの結果はblogresultに受け取る。クエリでエラーが発生した場合のメッセージ表示処理も合わせて実装。
JavaScript

createPageでページを生成する

クエリで取得したデータからforEachメソッドで各記事のデータを取り出し、ページを生成。ページの生成にはcreatePagesを使って、以下のように設定。

path

生成するページのパス。ここではblog/post/スラッグ をセット

component

生成に使用するテンプレート。gatsby-node.jsからの相対パスで指定。ここではblogpost-template.jsを指定。
JavaScript
これで記事ページが生成される。開発サーバーを起動し直して404ページを表示すると、ページが追加されていることが確認できる。
ただしこの段階では、全てのページで同じ内容が表示されてしまう。

記事ごとにデータを読み込んでページを生成

記事ごとに別のデータを読み込むため、テンプレート(blogpost-template.js)に各記事のIDを送り、そのIDを使ってデータを取得するように修正する。
JavaScript
contextで指定されたデータは、$をつけることでクエリの変数として扱うことができる。
テンプレート(blogpost-template.js)側のクエリを、受け取った変数を使ったクエリに修正。
JavaScript
 
Twitterでシェア