Is it possible to use Gatsby Head API with gatsby-plugin-mdx using the automatic page creation?

Question

I'm about to migrate from gatsby-plugin-react-helmet to the new Head API in my Gatsby project, as the Gatsby's support for React Helmet is apparently about to be deprecated in future. The site currently consists of a mix of static JSX pages and MDX via gatsby-plugin-mdx. The automatic page creation by placing the page components into src/pages is used, i.e. I'm not using the programmatic page creation via the createPages API or File System Route API. I prefer this approach for its clean directory structure and simplicity.

The problem is that if I have understood correctly, with Head API you add the document head to the page by exporting the head from page. With React Helmet, I could add the head in layout components, for example, but this is not possible with Head API. For JSX pages, it's not a problem to export from the page and I probably could do this in MDX files as well, but that wouldn't make any sense. I want to get the title data from the MDX frontmatter and do it automatically for MDX files. While I know that it's possible to do this using the createPages API or File System Route API and exporting Head from the page template, I still would like to stick with the automatic page creation if it's somehow possible. Has anyone using a similar approach yet managed to find a workaround for this? Or should I just reimplement the page creation using the alternative approaches?

Answer 1

You can access the frontmatter in MDX: https://www.gatsbyjs.com/docs/how-to/routing/mdx/#using-frontmatter-in-mdx

---
title: Building with Gatsby
author: Jay Gatsby
---

<h1>{props.pageContext.frontmatter.title}</h1>
<span>{props.pageContext.frontmatter.author}</span>

Then in your MDX you can do something like:

export const Head = () => <title>{props.pageContext.frontmatter.title}</title>