Как получить определенные элементы внутри HTML-узла Гэтсби GraphQL

Question

В настоящее время использует netlifyCMS для генерации файлов разметки и gatsby в качестве генератора статических сайтов

когда я запрашиваю данные через grapghql, он включает их все внутри html-узла, а не независимых узлов

скажем, я вставил два тега заголовка в CMS, и я хочу использовать эти теги внутри компонента

query BlogPostByPath {
markdownRemark {
    html
    frontmatter {
        path
        title
    }
  }
}

это сгенерирует это:

{
  "data": {
    "markdownRemark": {
        "html": "<p>test</p> <p>another test</p>",
        "frontmatter": {
        "path": "testPath",
        "title": "test"
     }
   }
 }
}

вопрос заключается в следующем: как я могу получить первый тег p и использовать его внутри компонента, а другой тег p вставить внутри другого компонента внутри основного компонента? например, как я могу контролировать, как узел HTML дает данные

и предполагая тот факт, что я не хочу вставлять их в несколько дочерних компонентов, скажем, я хочу, чтобы первый тег p имел определенный стиль, а второй тег p имел другой стиль

это сделало бы больше посылок, если есть способ получить доступ к определенным элементам в узле html