Gatsby: Can gatsby-mdx be used with markdown pulled from gatsby-source-contentful?

[janosh]

I would like to start using gatsby-mdx on a site powered by [gatsby-source-contentful](https://www.gatsbyjs.org/packages/gatsby-source-contentful/).

If I understand correctly, gatsby-mdx by default applies to all files with .mdx extension in the /src directory. Additional extensions can be specified in the plugin options:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-mdx`,
      options: {
        extensions: [".mdx", ".md"]
      }
    }
  ]
};

But how can I apply gatsby-mdx to markdown that is not in a separate file at all but part of a content node pulled from Contentful?

[LekoArts]

As a using-contentful example exists I would assume: yes 😛
https://github.com/ChristopherBiscardi/gatsby-mdx/tree/master/examples/using-contentful

[janosh]

Totally missed that. Thanks for the link, @LeKoArts!

[dmackerman]

@janosh Sorry to ping, but did you have success getting this working with Contentful? I tried reproducing the example, but didn't get it actually working.

[janosh]

@dmackerman No I didn't. I have to admit though that I hardly tried so that doesn't mean much.

[iammatthias]

Has anyone had luck with this? I've tried getting it to work based on the repo that @LekoArts suggested, but so far nothing has worked.

[omonk]

@iammatthias I've got it working with my contentful set up. It's worth noting that a lot of the queries are structured about the original authors content type set up. Can try and help you out!

This does work and I'm really thankful that I found this example, thinking of writing a blog post to solidify my learnings.

[janosh]

@omonk +1 for the blog post.

[iammatthias]

In the end, I think this was a case over complicating things. The example provided in the gatsby-mdx repo was a bit confusing. It seems like it mirrors the content to the local filesystem, then renders the MDX? Never got that working.

What ended up being really helpful was @johno's gatsby-example-contentful-mdx.

You can see how I got it all working here: https://github.com/iammatthias/.com/blob/master/src/templates/post.js

And I've included a condensed version below.

const BlogPost = ({ data, pageContext, location }) => {
  const post = data.contentfulPost
  return (
   <MDXRenderer>{post.body.childMdx.body}</MDXRenderer>
  )
}

query($slug: String!) {
    contentfulPost(slug: { eq: $slug }) {
      title
      body {
        childMdx {
          body
          id
        }
      }
    }
  }