Passing variables to use inside MDX file

Hi, I’m using gatsby-plugin-mdx to add rich markdown to my site.

I want to access the frontmatter of the markdown within the markdown itself.

The docs say this is available in my MDX file with {props.pageContext.frontmatter} but this returns an error “TypeError: Cannot read property ‘frontmatter’ of undefined”.

I presume this is because, rather than rendering as an individual page, I’m trying to render this mardown inside a component using MDXRenderer. I’m guessing that in this case “props.pageContext…” doesn’t work.

(The actual use case is for a portfolio site - I’m trying to loop through all my “Work” markdown files on a single “Featured Work” page and render each one individually)

I expect that the way to do this is by passing the a variable using the MDXRenderer component. Something like:

<MDXRenderer category={work.frontmatter.category}>{work.body}</MDXRenderer>

But then I’m not sure how to access the category property inside my MDX markdown.

Question:

Is this the correct way to pass variables into my MDX code? Is what I want to do even possible? And if so, how do I then access the variables inside my MDX file?

Thanks in advance, B