CODEWITHSUNDEEP
graphqlmarkdowngatsbyremarkjs
Kayote
Kayote

Reputation: 15617

Map over graphql output of list from a markdown file

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

Upvotes: 1

Views: 388

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

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

Upvotes: 1

Related Questions