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: Debugger with empty frontmatter object So to form a question. How do I get access to my frontmatter?

I have no idea why, but It randomly started working. – Rain336 May 09 '20 at 11:49 — Rain336, May 09 '20 at 11:49
Facing the same issue. None of the answers worked. – Adarsh Rao Feb 17 '21 at 08:13 — Adarsh Rao, Feb 17 '21 at 08:13

score 2 · Answer 1 · answered Feb 15 '21 at 17:43

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.

score 0 · Answer 2 · answered Nov 02 '20 at 17:05

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.

score -1 · Answer 3 · answered May 09 '20 at 08:55

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.

There is no query. According to the [docs](https://www.gatsbyjs.org/docs/mdx/writing-pages/), `props.pageContext.frontmatter` should be automatically populated. — Rain336, May 09 '20 at 11:41

Gatsby Mdx frontmatter is empty

3 Answers3