How to replace certain string in the site at build time?

[seebham]

I have a Gatsby v5 site with Sanity as a CMS. All of my pages are static. Some pages are hardcoded through Gatsby /pages and the remaining are generated by data from Sanity at the build time.

I want to have a feature where I can put a placeholder text like {current_year} in the hardcoded pages or in Sanity content blocks and it should be replaced with 2024 (using new Date().getFullYear().toString()) at build time.

Can we use onCreateWebpackConfig or onCreateBabelConfig or using any other lifecycle method?

Grateful for any help/suggestions/lead 🙌🏾

[808vita]

I think you are looking for page context

Pass context to pages
The automatically created pages can receive context and use that as variables in their GraphQL queries. To override the default and pass your own context, open your site’s gatsby-node.js and add similar to the following:

gatsby-node.js

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

  deletePage(page)
  // You can access the variable "house" in your page queries now
  createPage({
    ...page,
    context: {
      ...page.context,
      house: `Gryffindor`,
    },
  })
}

On your pages and templates, you can access your context via the prop pageContext like this:

import React from "react"

const Page = ({ pageContext }) => {
  return <div>{pageContext.house}</div>
}

export default Page

Page context is serialized before being passed to pages. This means it can’t be used to pass functions into components and Date objects will be serialized into strings.