Need guidance on parsing markdown with Modular Content Fields, specifically multi-line paragraph

[jessebox]

Hi people,

Context

I’m in the process of converting my Gatsby blog from MDX to DatoCMS because I feel the MDX plugin is too opinionated as to how it parses markdown. My goal for moving to DatoCMS was to create a layout similar to Medium posts with images spanning larger than text blocks. Because I’m building a blog, the structure of the content needs to be modular which is why I opted for the Modular Content Field option when building my DatoCMS content model.

I’m not too sure if this is the smartest approach, but right now I would like to use two Modular Blocks, “Text” & “Media”. Focusing on the Text Field I would like to use markdown in which would then be parsed by Gatsby into HTML

Problem

I don’t know which GraphQL endpoint I should use to access the markdown content written in this Modular Text Block.

Looking at the code snippet below, I can see MDX can be used somehow. This is fine for my needs because the issue I had with MDX was that it wraps every parsed markdown element in a

tag, making it too complex to style things like images.

datoCmsPost {
    body {
      ... on DatoCmsText {
        textNode {
          childMdx {
            html
          }
        }
      }
    }
  }

I can’t find any guides similar to what I’m trying to achieve and I also can’t find any documentation around this childMDX node.

It would be great if I could get some guidance on

1. If my goal can be solved in a simpler way if not then
2. What is the correct GraphQL schema I need to parse markdown to my Gatsby blog
3. What needs to happen on my gatsby blog? Do I use or something else.

Hope my long explanation helps you to understand my dilemma.

[mat_jack1]

Hello @jessebox and welcome!

Based on your project, you can do something like this:

{
  datoCmsPost {
    body {
      ... on DatoCmsParagraph {
        paragraph
      }
      ... on DatoCmsVisual {
        media {
          url
        }
      }
    }
  }
}

to query all the different modules, is that what you were trying to do?

Regarding the MDX plugin, I’m not familiar with that, I hope my suggestion helps you out though?

Let me know if not and we can try something else!

[jessebox]

Hey Mat,

So the solution you’ve specified is what I’ve currently implemented, but the problem begins when I try to use markdown to specify headers. See the below screenshots to understand what I mean.

I dont know how to render markdown language in html when using modular content blocks.

Does that make things a bit clearer?

[jessebox]

Current implementation

[jessebox]

The output

[mat_jack1]

I see @jessebox !

Have a look at this:

{
  datoCmsPost {
    body {
      ... on DatoCmsParagraph {
        paragraphNode {
          childMarkdownRemark {
            html
          }
        }
      }
      ... on DatoCmsVisual {
        media {
          url
        }
      }
    }
  }
}

[jessebox]

Thanks @mat_jack1 I realised that I needed the plugin gatsby-transformer-remark installed in my gatsby config before I access see your suggested schema. Got my problem solved!