GatsbyJS : Accessing different sections of a blog post saved in markdown file (GraphQL)

Question

I'm using Gatsby JS and I'm trying to make a blog which uses Markdown files to generate blogposts. I have different sections in my blogpost template, which I would like to put into different sections in my blogpost template. But I'm not sure how I can access them separately in my Markdown files.

I know how to get the whole text and how to grab separate parts of my frontmatter, but I don't know how I would get, eg, only the 'ingredients' info from my text.

Right now I'm solving this problem by including the different sections of the blog post directly into the frontmatter, so I can access these sections with graphQL, but I know this isn't what frontmatter is supposed to be used for.

Is there a way to split up parts of my Markdown text into sections, so that I can use these individual parts in a GraphQL query?

this is what I have:

---
title: "Cake"
date: "09-12-2017"
post: "2"

Name: "Chocolate Cake"
Author: "DJ"
Source: "Book"

Ingredients: "milk, dark chocolate, coca cola, skittles, tea, liquorice"

Subtitle1: "First Heading |"
Subtitle2: "Second Heading |"
Subtitle3: "Third Heading |"

Text1: "first text"
Text2: "second text"
Text3: "third text"
---

My excerpt goes here

I would like to do something like this:

---
title: "Cake"
date: "09-12-2017"
post: "2"
---

Name: " Chocolate Cake"
Author: "DJ"
Source: "Book"

Ingredients: "milk, dark chocolate, coca cola, skittles, tea, liquorice"

Subtitle1: "First Heading |"
Subtitle2: "Second Heading |"
Subtitle3: "Third Heading |"

Text1: "first text"
Text2: "second text"
Text3: "third text"

Excerpt: my excerpt goes here

and then somehow be able to grab these separate pieces of information to use inside a blogpost template.

Answer 1

Gatsby's data layer has hooks to allow you to do custom transformations on your data eg like splitting a markdown file into structured fields.

To do so, implement onCreateNode in your gatsby-node.js file and parse your markdown files and add fields onto the MarkdownRemark node with createNodeField