1

I am using Gatsby.js & using GraphQL to retrieve data from the markdown file. The markdown file has the content structure as:

---
title: abc
---

- heading A
 - sub-heading A
 - sub-heading B
- heading B
 - sub-heading A
 - sub-heading B
 - sub-heading C
...

Using the plugin gatsby-transformer-remark, the graphql output I get is something like this:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "internal": {
              "content": "\n- heading A\n  - sub-heading An  - sub-heading B\n- heading B ....

Is it possible to get an array or even an object of the markdown list so I can map (loop) over the values in my javascript code?

Thanks

Kayote
  • 14,579
  • 25
  • 85
  • 144

1 Answers1

1

Are you building a table of content? Gatsby's remark plugin automatically generate a table of content for you, there're also a few options you can pass in to modify it.

Copied from the doc:

{
  allMarkdownRemark {
    edges {
      node {
        html
        tableOfContents(
          pathToSlugField: "frontmatter.path"
          heading: "only show toc from this heading onwards"
          maxDepth: 2
        )
        frontmatter {
          # Assumes you're using path in your frontmatter.
          path
        }
      }
    }
  }
}

If you are doing a custom table of content, it'd be easier to do it in the frontmatter. If that's not possible, the last option I know of is to write a remark plugin that custom parse your data, then attach it to the graphql node

Derek Nguyen
  • 11,294
  • 1
  • 40
  • 64
  • Thanks for coming to my aid again Derek. For some reason unknown to me now, I am getting an empty tableOfContents, even with 'fields.slug' param value. While exploring why that is, in the meantime I will use your second suggestion of having graphql extract headings from the frontmatter of each post. – Kayote Apr 05 '19 at 08:27