src/templates/Video.js

import React, { Component } from 'react'
import { graphql } from 'gatsby'
import Layout from 'src/components/Layout'
import LayoutHelmet from 'src/components/LayoutHelmet'
import SubscribeMain from 'src/components/Subscribe'
import Footer from 'src/components/Footer'
import Home from 'src/components/Home'
import Header from 'src/components/Header'
import SingleVideo from 'src/components/SingleVideo'
import NewsFeed from 'src/components/NewsFeed'
import withLocale from 'src/components/withLocale'

class Video extends Component {
  render() {
    const {
      data: {
        news: { edges: newsEdges },
        video,
        subscribe,
      },
      locale,
      changeLocale,
    } = this.props

    const news = newsEdges.filter(({ node }) => node.slug !== '_')

    console.log(this.props)

    return (
      <Layout locale={locale}>
        <LayoutHelmet locale={locale} />
        <main>
          <Header
            {...this.props}
            locale={locale}
            full={true}
            style={{ backgroundColor: '#161616' }}
            changeLocale={changeLocale}
          />
          <SingleVideo data={video} />
          <NewsFeed news={news} locale={locale} inversed />
          <Home onChangeData={this.props.onChangeData} locale={locale} />
          <SubscribeMain locale={locale} subscribe={subscribe} />
        </main>
        <Footer locale={locale} />
      </Layout>
    )
  }
}

export const query = graphql`
  query($id: String!) {
    video: datoCmsSingleVideo(id: { eq: $id }) {
      title
      videoId
    }
    news: allDatoCmsNews(filter: { ismain: { eq: true } }, sort: { fields: [publishdate], order: DESC }, limit: 3) {
      edges {
        node {
          publishdate(formatString: "DD/MM/YYYY")
          slug
          title
          description
          ismain
          image {
            id
            fluid(maxWidth: 1240, imgixParams: { fm: "jpg", auto: "compress, format" }) {
              ...GatsbyDatoCmsFluid
            }
          }
          author
        }
      }
    }

    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default withLocale(Video)