GraphiQL / Gatsby / Netlify CMS - Turn netlify query into Template

Question

New to both Gatsby and Netlify. What I've managed to achieve so far is:

1. Setting up a basic Gatsby project
2. Synced it to Netlify
3. Produced a GraphiQL query

I have an admin > config.yml file that populates the fields i can use in netlify

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/subscription/index.md"
        label: "Subscription Page"
        name: "Subscription Page"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "subscription-page"}
          - { label: 'Features Header Title', name: 'featuresHeaderTitle', widget: 'string' }
          - { label: 'Features List', name: 'featuresList', widget: 'list', 
              fields: [ 
                {label: Feature Title, name: featureTitle, widget: text},
                {label: Feature Description, name: featureDescription, widget: markdown}
                {label: Feature Published, name: featurePublished, widget: boolean}
              ] 
            }
          - { label: 'Seconday Features Header Title', name: 'secondaryFeaturesHeaderTitle', widget: 'string' }
          - { label: 'Secondary Features List', name: 'secondaryFeaturesList', widget: 'list', 
              fields: [ 
                {label: Secondary Feature Title, name: secondaryFeatureTitle, widget: text},
                {label: Secondary Feature Description, name: secondaryFeatureDescription, widget: markdown}
                {label: Secondary Feature Published, name: secondaryFeaturePublished, widget: boolean}
              ] 
            }  

Once I publish a page in Netlify and it syncs to my GitHub account, it produces an md file with the following:

---
title: Subscription
featuresHeaderTitle: 24 June - Features Header Title Again
featuresList:
  - featureTitle: Feature Title 1
    featureDescription: Feature Description 1
  - featureTitle: Feature Title 2
    featureDescription: Feature Description 2
secondaryFeaturesHeaderTitle: 24 June - Subscription Secondary Features Header Title
secondaryFeaturesList:
  - secondaryFeatureTitle: Secondary Feature Title
    secondaryFeatureDescription: Secondary Feature Description
  - secondaryFeatureTitle: Secondary feature title
    secondaryFeatureDescription: Secondary feature description
  - secondaryFeatureTitle: Secondary feature title 3
    secondaryFeatureDescription: Secondary feature description 3
---

In GraphiQL I have a query which I believe to be correct that produces the following in the Code Exporter:

import React from "react"
import { graphql } from "gatsby"

const ComponentName = ({ data }) => <pre>{JSON.stringify(data, null, 4)}</pre>

export const query = graphql`
  {
    markdownRemark(frontmatter: {title: {eq: "Subscription"}}) {
      frontmatter {
        featuresHeaderTitle
        featuresList {
          featureDescription
          featureTitle
        }
        secondaryFeaturesHeaderTitle
        secondaryFeaturesList {
          secondaryFeatureDescription
          secondaryFeatureTitle
        }
      }
    }
  }
`

export default ComponentName

My question is, how do I display the above query in a template with HTML? I'd like to display the content as follows:

• Features Header Title

• List (ul/li) of the items in the feature list

• Secondary Features Header Title

• List (ul/li) of the items in the secondary feature list

component.js

import * as React from 'react'
import { graphql } from 'gatsby'


const ComponentName = ({data}) => {
  return (
    <div>
      {data.markdownRemark.frontmatter.featuresHeaderTitle}
    </div>
  )
}

export const query = graphql`
  {
    markdownRemark(frontmatter: {title: {eq: "Subscription"}}) {
      frontmatter {
        featuresHeaderTitle
        featuresList {
          featureDescription
          featureTitle
        }
        secondaryFeaturesHeaderTitle
        secondaryFeaturesList {
          secondaryFeatureDescription
          secondaryFeatureTitle
        }
      }
    }
  }
`


export default ComponentName```