Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use childMarkdownRemark #2088

Closed
3CordGuy opened this issue Sep 11, 2017 · 9 comments

Comments

Projects
None yet
4 participants
@3CordGuy
Copy link
Contributor

commented Sep 11, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2017

  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

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2017

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

@3CordGuy

This comment has been minimized.

Copy link
Contributor Author

commented Sep 12, 2017

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.
content-schema

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 comment has been minimized.

Copy link
Contributor Author

commented Sep 12, 2017

💩 ...
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.

screen shot 2017-09-12 at 7 15 06 am

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

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2017

Sweet, glad you got it working!

@3CordGuy

This comment has been minimized.

Copy link
Contributor Author

commented Sep 12, 2017

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... 🤔
screen shot 2017-09-12 at 12 43 30 pm

@3CordGuy

This comment has been minimized.

Copy link
Contributor Author

commented Sep 12, 2017

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

This comment has been minimized.

Copy link
Member

commented Dec 5, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Dec 12, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.