SEOmatic & CraftQL with react-helmet

index.js

/*eslint no-useless-escape: 0 */
import React from "react"
import Helmet from "react-helmet"
import ReactHtmlParser from "react-html-parser"
import { graphql } from "gatsby"

const SEO = props => {
    const { data } = props
    const splitJsonLdStringIntoArray = data.metaJsonLdContainer
        .replace(/\<\/script\>/g, "")
        .split(`<script type="application/ld+json">`)

    return (
        <Helmet>
            {/* Inject raw HTML into head */}
            {ReactHtmlParser([data.metaTitleContainer, data.metaTagContainer])}
            {splitJsonLdStringIntoArray.map((script, index) => (
                <script type="application/ld+json" key={`json-ld-${index}`}>
                    {script}
                </script>
            ))}
        </Helmet>
    )
}

const IndexPage = ({ data }) => {
    const { seomatic } = data.craft.entry[0]
    return (
        <>
            <SEO data={seomatic} />
        </>
    )
}

export const IndexPageQuery = graphql`
    {
        craft {
            entry: entries(section: [home]) {
                ... on Craft_Home {
                    seomatic {
                        metaTagContainer
                        metaTitleContainer
                        metaJsonLdContainer
                    }
                }
            }
        }
    }
`

export default IndexPage