Accessing MDX Frontmatter in Gatsby

November 7, 2018

While building this site in Gatsby using MDX, I noticed that there wasn't any documentation on how to include data from the frontmatter of an MDX document in the document's page layout.

Though this isn't anywhere in the gatsby-mdx docs (that I can tell), there's an example of how to use it in the repo. Frontmatter is passed to the layout component in props.pageContext.frontmatter. This means you can do things like this in your markdown document:

---
title: My Page
---
This is the content

And in your layout component, you can grab the frontmatter:

const MyPageLayout = (props) => {
    return (
        <div>
            <h1>{props.pageContext.frontmatter.title}</h1>
            <div>
                {props.children}
            </div>
        </div>
    ); 
};

On this blog's home page I use frontmatter of all the MDX documents, which includes things like title, date, and preview text, to render the list of blog post previews.