Форматирование HTML-данных уценки в компоненте Gatsby с использованием статического запроса

    import React from "react"
import { Link, StaticQuery, graphql } from "gatsby"

const Cont = ({ data }) => (
  <section className="home-banner">
    <h1 className="title">
      {data}
    </h1>
    <div className="description">
      {data}
    </div>
  </section>
)

export default function ContText() {
  return(
    <StaticQuery
      query={graphql`
        query MyQuery {
          markdownRemark(frontmatter: {template: {eq: "contact-page"}}) {
            html
            frontmatter {
              title
            }
          }
        }`
      }

      render={ data  => {

        return(
          <Cont

                data={data.markdownRemark.html}

          />
        )
       }
      }
    />
  )
}

import React from "react"
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"

import Layout from "../components/layout"
import BlogListHome from "../components/blog-list-home"
import SEO from "../components/seo"
import Cont from "../components/contact"

export const pageQuery = graphql`
  query HomeQuery($id: String!){
        markdownRemark(id: { eq: $id }) {
      id
      html
      frontmatter {
        title
        tagline
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 480, maxHeight: 380, quality: 80, srcSetBreakpoints: [960, 1440]) {
              ...GatsbyImageSharpFluid
            }
            sizes {
              src
            }
          }
        }
        cta {
          ctaText
          ctaLink
        }
      }
    }
  }
  `

const HomePage = ({ data }) => {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  const Image = frontmatter.featuredImage ? frontmatter.featuredImage.childImageSharp.fluid : ""
    return (
        <Layout>
      <SEO/>
      <div className="home-banner grids col-1 sm-2">
        <div>
          <h1 class="title">{frontmatter.title}</h1>
          <p class="tagline">{frontmatter.tagline}</p>
          <div className="description" dangerouslySetInnerHTML={{__html: html}}/>
        </div>
        <div>
          {Image ? (
            <Img
              fluid={Image}
              alt={frontmatter.title + ' - Featured image'}
              className="featured-image"
            />
          ) : ""}
        </div>
      </div>
      <div>
      <Cont/>
      </div>
      <BlogListHome/>
      <div>
      <h1> Recomendations go hear!</h1>
      </div>
        </Layout>
    )
}

export default HomePage