javascript - gatsby graphql htmlノード内の特定の要素を取得する方法

Question

grapghql を介してデータをクエリすると、独立したノードではなく、html ノード内にすべてが含まれます

CMS に 2 つのタイトル タグを挿入し、それらのタグをコンポーネント内で使用したいとします。

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 タグに特定のスタイルを持たせ、2 番目の p タグに別のスタイルを持たせたいとしましょう。

htmlノード内の特定の要素にアクセスする方法があれば、より多くの送信が行われます