Profile
RomdomNotes
Profile
RomdomNotes
プロフィール
/
雑記
/
記事一覧
/
gatsby+cmsで動的にページを生成
gatsby+cmsで動的にページを生成
2020/9/23
6:27
2021/12/23
8:47
前にやった、contentfulからデータを取得してgatsby.jsでページを作成するやつ、やり方忘れたので思い出しながらまとめてみる。
以下の本に書いてあるやつなので、より詳しく知りたい方は購入をおすすめします。なかなか良い本でした。
【特典付き! 】Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ)
Amazonでエビスコムの【特典付き! 】Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ)。アマゾンならポイント還元本が多数。エビスコム作品ほか、お急ぎ便対象商品は当日お届けも可能。また【特典付き! 】Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ)もアマゾン配送商品なら通常配送無料。
https://amzn.to/365VeLf
contentful上で記事を作成
割愛
GraphQLでcontentfulのデータを扱えるようにする
http://localhost:8000/___graphql
を開いて
、
という項目が増えていることを確認。
記事のテンプレートファイルを作成
https://localhost:8000/__graphql
を開いてクエリを作成し、テンプレートファイル下部に貼り付け。
gatsby-node.jsを作成
Gatsbyがページを生成する際、特定のタイミングやイベントに合わせて処理をさせたいケースがあります。そうした処理を設定するのが
です。
GatsbyNodeAPIとして様々なAPIが用意されており、関数の形でexportすることで利用します。ここではcreatePagesを使います。
クエリを生成する
http://localhost:8000/___graphql
を開く
allContentfulBlogPost > edges > node > id, slug あたりにチェックを入れてクエリを生成
クエリを追加する
生成したクエリをgatsby-node.jsに追加。クエリの結果はblogresultに受け取る。クエリでエラーが発生した場合のメッセージ表示処理も合わせて実装。
createPageでページを生成する
クエリで取得したデータからforEachメソッドで各記事のデータを取り出し、ページを生成。ページの生成にはcreatePagesを使って、以下のように設定。
path
生成するページのパス。ここでは
をセット
component
生成に使用するテンプレート。
からの相対パスで指定。ここでは
を指定。
これで記事ページが生成される。開発サーバーを起動し直して404ページを表示すると、ページが追加されていることが確認できる。
ただしこの段階では、全てのページで同じ内容が表示されてしまう。
記事ごとにデータを読み込んでページを生成
記事ごとに別のデータを読み込むため、テンプレート(
)に各記事のIDを送り、そのIDを使ってデータを取得するように修正する。
contextで指定されたデータは、$をつけることでクエリの変数として扱うことができる。
テンプレート(
)側のクエリを、受け取った変数を使ったクエリに修正。
Xでポスト