Gatsby: How to use childMarkdownRemark

[3CordGuy]

Tutorial 4 covers the user of MarkdownRemark but doesn't dive into anything pertaining to using childMarkdownRemark which I have seen used in queries in some projects that pull from sources like contentful (Which is actually my end goal).

I have contentful data coming through but I can't figure out how to transform just the one field ("body") into html using this means.

I've seen something like this:

{
  contentfulBlogPost(slug: {eq: "test-post"}) {
    title
    slug
    postDate
    body {
      childMarkdownRemark {
        html
      }
    }
    cover {
      responsiveResolution {
        src
        srcSet
        width
        height
      }
    }
  }
}

Any direction would be greatly appreciated.

[KyleAMathews]

1. Open GraphiQL
2. Paste in

allContentfulBlogPost {
  edges {
    node {
      id
    }
  }
}

1. Use GraphiQL's autocomplete to explore the schema.

https://www.howtographql.com/ should have some videos on using GraphiQL.

[KyleAMathews]

And if this isn't enough, you gotta describe more what the issue is as your query looks correct.

[3CordGuy]

Yes. Thanks. I do understand that. What I don't understand is why childMarkdownRemark is not in my schema if it's supposed to "just work." Yet There's so a few examples of it's use elsewhere in github projects. It is not mentioned/documented anywhere but the npm package page when I google it.

Maybe I should note that I am using the advanced-starter and it has this as the config for the plugin setup by default:

{
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 690
            }
          },
          {
            resolve: "gatsby-remark-responsive-iframe"
          },
          "gatsby-remark-prismjs",
          "gatsby-remark-copy-linked-files",
          "gatsby-remark-autolink-headers"
        ]
      }
    },

Here's my schema autocomplete response for the inner body of my content model.

I would guess that there's no configuration on the plugin that is needed because other examples on github just have gatsby-transformer-remark listed in their gatsby-config

[3CordGuy]

💩 ...
This whole time it's been the gatsby-transformer-remark version that has kept it from not showing in my schema.
I changed my package.json to ^1.0.9 to match another project on github and ran yarn and got it to 1.7.7 and now it works.

The advanced-starter does have ^1.7.0 in the package.json but for some reason it wouldn't work when I first ran gatsby new blog https://github.com/gatsbyjs/...

Wish I had a clue why this didn't install properly or work out of the box. At least I can get moving again building this. I am loving Gatsby btw!

[KyleAMathews]

Sweet, glad you got it working!

[3CordGuy]

I had to run off to work when I posted that earlier so I actually didn't get a chance to try it out until now on my lunch break. Any idea why the schema inside childMarkdownRemark would not have html? Does my markdown need to have frontmatter in the contentful field to render the html?

See screenshot: Only frontmatter is listed... 🤔

[3CordGuy]

After more tinkering, it turns out it was related to the way it was defined in the config file entry shown

{
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 690
            }
          },
          {
            resolve: "gatsby-remark-responsive-iframe"
          },
          "gatsby-remark-prismjs",
          "gatsby-remark-copy-linked-files",
          "gatsby-remark-autolink-headers"
        ]
      }
    },

I commented it out and just included:
gatsby-transformer-remark
in the gatsby-config.js plugin list and it works fine showing childMarkdownRemark{ html }.

So is this a bug with gatsby-remark-images? Or perhaps that's not usable with pulling source from contentful?

Hopefully this helps someone else who is trying to use contentful and uses the advanced-starter as a springboard.

[smakosh]

I'm trying to get excerpt inside the childMarkdownRemark but it returns an empty string, any idea why?

I'm getting my content from Contentful btw.

[steoneill]

Yeah i'm having issues with it too, i just get "message": "getNodesByType is not a function",