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

contentful上で記事を作成

割愛

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

http://localhost:8000/___graphql を開いて という項目が増えていることを確認。

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

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

gatsby-node.jsを作成

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

クエリを生成する

allContentfulBlogPost > edges > node > id, slug あたりにチェックを入れてクエリを生成

クエリを追加する

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

createPageでページを生成する

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

path

生成するページのパス。ここでは をセット

component

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

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

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