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

2020/9/23 15:272021/12/23 17:47

前にやった、contentfulからデータを取得してgatsby.jsでページを作成するやつ、やり方忘れたので思い出しながらまとめてみる。

以下の本に書いてあるやつなので、より詳しく知りたい方は購入をおすすめします。なかなか良い本でした。

contentful上で記事を作成

割愛

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

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

Gatsbyがページを生成する際、特定のタイミングやイベントに合わせて処理をさせたいケースがあります。そうした処理を設定するのがです。

GatsbyNodeAPIとして様々なAPIが用意されており、関数の形でexportすることで利用します。ここではcreatePagesを使います。

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

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

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

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

生成に使用するテンプレート。からの相対パスで指定。ここではを指定。

これで記事ページが生成される。開発サーバーを起動し直して404ページを表示すると、ページが追加されていることが確認できる。

ただしこの段階では、全てのページで同じ内容が表示されてしまう。

記事ごとに別のデータを読み込むため、テンプレート()に各記事のIDを送り、そのIDを使ってデータを取得するように修正する。

contextで指定されたデータは、$をつけることでクエリの変数として扱うことができる。

テンプレート()側のクエリを、受け取った変数を使ったクエリに修正。