Masashi Ishikawa's portfolio

GatsbyのルートページにContextを設定する方法

2019/05/31

なにこれ

Gatsbyでは、gatsby-node.jsのcreatePagesで以下のようにページを作成できます。ただルートページ（index.jsのページ）はGatsby側で生成されるので通常はContextが設定できません。しかし場合によってはルートページにContextを設定したい時もあるでしょう。そこで今回は、ルートページにContextを設定する方法をご紹介します。

gatsby-node.jsでページにContextを設定する方法（ルートページでは使えない）

exports.createPages = ({ actions }) => {
  /* (中略) */

  actions.createPage({
    path: node.fields.slug,
    component: qiitaPost,
    context: {      slug: node.fields.slug,      relatedPosts,      latestPosts,      ...previouseAndNext(posts, index)    },  })

  /* (中略) */
}

実装方法

gatsby-node.jsではonCreatePageというAPIが用意されており、ページ生成時の処理を定義できます。これを使って以下のような処理を実行します。

gatsby-node.js

exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions

  // ルートページの場合のみ処理継続  if (page.path === '/') {    return;  }
  // いったんルートページを削除  deletePage(page)
  // pageオブジェクトをもとにルートページを再生成
  createPage({
    ...page,
    context: {      ...page.context,      house: `Gryffindor`,    },  })
}