Gatsby Mdx frontmatter is empty

Question

I have a mdx gatsby page with frontmatter defined.

---
title: About Me
path: /about
description: Some information about me.
---

# About Me
[Twitter](https://twitter.com/RainFire336)

I have configured a default layout in the gatsby-config.js :

{
  resolve: 'gatsby-plugin-mdx',
  options: {
    defaultLayouts: {
      default: require.resolve("./src/components/page-layout.tsx")
    },
    gatsbyRemarkPlugins: [
      'gatsby-remark-images',
      {
        resolve: 'gatsby-remark-prismjs',
        options: {
          showLineNumbers: true,
          prompt: {
            user: 'rain',
          },
        },
      },
    ],
  },
}

The layout tries to access the frontmatter using it's props:

import React from 'react';
import { Layout } from './layout';
import { Card } from './card';
import { Metadata } from './metadata';

interface Props {
  children: React.ReactNode;
  uri: string;
  pageContext: { frontmatter: any };
}

export default function (p: Props) {
  const { children, uri, pageContext } = p;
  return (
    <Layout>
      <Metadata {...pageContext.frontmatter} url={uri} />
      <Card style={{ width: '50%' }}>{children}</Card>
    </Layout>
  );
}

The problem is that frontmatter is always an empty object: So to form a question. How do I get access to my frontmatter?

Answer 1

I also ran into this issue. I had to re-run gatsby develop in order for the frontmatter to show up in my pageContext .

I've also found that when I update my frontmatter, it doesn't update automatically and I need to restart the gatsby develop command in order for it to show up.

Answer 2

Had exactly the same issue. Re-running gatsby develop didn't work for me.

What worked:

Any time I added a new key/value in the front-matter, I needed to delete the .cache folder at the root of my Gatsby application before re-running gatsby develop . Then I was able to access the correct front matter through pageContext.frontmatter in my Layout.

It's also worth noting that frontmatter should go before any imports in your MDX files. Like so:

---
foo: 'bar'
---

import './something.js'

# My great MDX

TLDR:

Delete .cache folder in Gatsby project root directory.

Answer 3

It's impossible for an outsider to debug your code without a minimum reproducable example .

The best way to debug GraphQL is to use the GraphiQL interface of your browser.

Paste your graphQL query that populates pageContext with data into the query window of your GraphiQL editor http://localhost:8000/___graphql .

Does the frontmatter contain data?

• If not, there is something wrong with your GraphQL query or your data cannot be queried.
• If it does, you are most likely making a mistake passing the data around or destructuring it. Use console.log(pageContext) to examine the data object.