reactjs – How to structure GraphQL data to include MDX parent directory name

I have a simple Gatsby app that uses MDX files to generate pages (based on the starter app from the Gatsby tutorials).

I have a folder structure similar to this:

/checks
  /category1
    - example1.mdx
  /category2
    - example2.mdx

I want the data GraphQL returns to be structured similar, so I can grab the name of each category, for example something similar to:

{
  "checks": {
    "category1": {
      "nodes": [
        {
          "frontmatter": {
            "title": "example 1",
            "slug": "exp1",
            "topic": "category1"
          }
        },
        {
          "frontmatter": {
            "title": "example 2",
            "slug": "exp2",
            "topic": "category1"
          }
        }
      ]
    },
    "category2": {
      "nodes": [
        {
          "frontmatter": {
            "title": "example 3",
            "slug": "exp3",
            "topic": "category2"
          }
        },
        {
          "frontmatter": {
            "title": "example 4",
            "slug": "exp4",
            "topic": "category2"
          }
        }
      ]
    }
  }
}

I can’t seem to get anywhere near this result using the Gatsby graphQL editor – how can I achieve this?

Thanks in advance!

Read more here: Source link