Gatsby: Question: Can I fetch markdown content from CMS and parse it with the gatsby-transformer-remark?

[ThiagoMiranda]

Hi..

I've made a Gatsby project using gatsby-transformer-remark and it worked nicely. Now I have to bind a CMS to it so I've picked the cockpit using gatsby-plugin-cockpit to do so. But the problem is that I already have some content in the markdown files so I was wondering if I can use the fill the same content in a "markdown collection" from Cockpit and it transforms to HTML via the gatsby-transformer-remark.
Is it possible? If not, does any one has an idea of what I have to do to make it work?

Thanks

[pieh]

Contentful source plugin does that for its rich text fields, so in general you can do that - but this might involve some coding.

[ThiagoMiranda]

Thanks @pieh, involving some coding wouldn't be the problem.
Analysing the code here I was wondering if I can do a different approach. My content would be an a "html string" and I'll try to parse it to HAST and send it to the rehype-react plugin. So basically I "just" need to reproduce what the gatsby-remark-componentdoes. Does anyone have some thoughts?
I've tried to use the html-parse-stringify module but it seems to generate a different element tree which the rehype-react doesn't recognize

Thanks

[KyleAMathews]

The cockpit source plugin needs the ability to set the mediaType of the text nodes it creates. If it sets their nodes to text/markdown then gatsby-transformer-remark will transform them. Search the Contentful source for this. Ideally Cockpit would say directly if text is markdown or not. If not, a pattern like this where you can specify mediaTypes works great https://www.gatsbyjs.org/packages/gatsby-source-mongodb/?=mongo#mapping-mediatype-feature

[pieh]

I just checked source code of gatsby-source-cockpit and it seems it should automatically handle markdown if field type in cockpit is set as markdown ( https://github.com/mpartipilo/gatsby-source-cockpit/blob/master/gatsby-node.js#L115 for starting point). So what You initially asked should work out of the box

[ThiagoMiranda]

@KyleAMathews So what you are saying is that the gatsby-transformer-remark will pull down the "content string" from any source, not only from .md local files?

[ThiagoMiranda]

@pieh unfortunately it's not. I'll deep into more testing and let you know. Can I leave the issue open for now?

[KyleAMathews]

the gatsby-transformer-remark will pull down the "content string" from any source, not only from .md local files?

Yup! As long as a node identifies as markdown, it'll transform it.

Good luck with debugging!

[ThiagoMiranda]

@KyleAMathews so when I type this query ( content being a "markdown type field" ) that would have to return me a parsed Markdown using the gatsby-transformer-remark ( and its plugins )?

Ps: I'm sorry for too many questions but I'm on a deadline here and trying to get the best approach =)

[ThiagoMiranda]

@pieh @KyleAMathews
Finally got it. Unfortunately their documentation is very poor but I was able to get an parsed markdown with the following query ( my collection name is HomeMd ):

{    
  cockpitHomeMd(entry: {slug: {eq: "/"}}) {
    entry {
      content
      slug
    }
    childCockpitHomeMdContentTextNode {
      content
      childMarkdownRemark {
        htmlAst
      }
    }
  }
}

Thanks a lot for the attention, help and for the great Gatsby!

[jmolivas]

@KyleAMathews
Can you please elaborate

Yup! As long as a node identifies as markdown, it'll transform it.

I am building a few proof of concepts using Gatsby with Drupal.
Within the CMS I am using a Markdown WYSIWYG and in the Gatsby component have this query where

• nodePage.body.value _contains markdown_
• nodePage.body.processed _contains html_

query($slug: String!) {
    nodePage(fields: { slug: { eq: $slug } }) {
      title
      path {
        alias
      }
      body {
        value
        processed
      }
      fields {
        slug
      }
    }
  }

Using this is the way to go:

<div dangerouslySetInnerHTML={{__html: data.nodePage.body.value }}>
</div>

Or there is a way to process the markdown ? and there is any benefit from Gatsby doing it instead of using the content already processed from Drupal?

[EAdeveloper]

@jmolivas
There are many packages and plugins to convert markdown to HTML.
I particularly used a package called showdown.js
to convert the markdown formatting coming from Strapi.io Headless CMS API

If Drupal does the job of converting the markdown to HTML,
I do not see any advantage of using any other plugin since
the pages are created during the build time, remember.