src/templates/News.js

import React, { Component } from 'react'
import { graphql } from 'gatsby'
import Layout from 'src/components/Layout'
import Footer from 'src/components/Footer'
import Cover from 'src/components/Cover'
import News from 'src/components/News'
import SubscribeMain from 'src/components/Subscribe'
import PageHelmet from 'src/components/PageHelmet'
import withLocale from 'src/components/withLocale'

class NewsTemplate extends Component {
  render() {
    const {
      locale,
      data: { news, subscribe },
      location: { pathname },
      changeLocale,
    } = this.props

    return (
      <Layout locale={locale}>
        <PageHelmet title={news.title} image={news.image.id} description={news.description} locale={locale} />
        <Cover
          locale={locale}
          image={news.image}
          description={news.description}
          title={news.title}
          changeLocale={changeLocale}
        />
        <News news={news} locale={locale} pathname={pathname} />
        <SubscribeMain locale={locale} subscribe={subscribe} />
        <Footer locale={locale} />
      </Layout>
    )
  }
}

export const query = graphql`
  query NewsTemplate($id: String!, $locale: String!) {
    news: datoCmsNews(id: { eq: $id }, locale: { eq: $locale }) {
      title
      image {
        id
        url
        fluid(maxWidth: 2560, imgixParams: { fm: "jpg", auto: "compress, format" }) {
          ...GatsbyDatoCmsFluid
        }
      }
      description
      author
      publishdate(formatString: "DD.MM.YYYY")
      slug
      bodyNode {
        childMarkdownRemark {
          html
        }
      }
    }
    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default withLocale(NewsTemplate)