src/templates/Interviews.js

import React, { Component } from 'react'
import { graphql } from 'gatsby'
import Header from '../components/Header'
import Footer from '../components/Footer'
import InterviewsList from '../components/InterviewsList'
import PageHelmet from 'src/components/PageHelmet'
import Subscribe from '../components/Subscribe'
import withLocale from 'src/components/withLocale'

class Interviews extends Component {
  render() {
    const {
      data: { interviews, subscribe },
      locale,
      changeLocale,
    } = this.props

    return (
      <div>
        <PageHelmet title="Interviews" locale={locale} />
        <Header full={true} locale={locale} changeLocale={changeLocale} />
        <InterviewsList interviews={interviews} locale={locale} />
        <Subscribe style={{ marginTop: '70px' }} locale={locale} subscribe={subscribe} />
        <Footer locale={locale} />
      </div>
    )
  }
}

export const query = graphql`
  query Interviews($locale: String!) {
    interviews: allDatoCmsInterview(filter: { locale: { eq: $locale } }) {
      edges {
        node {
          title
          description
          podcast {
            podcastTitle
            podcastGuest
            podcastCover {
              id
              fluid(maxWidth: 400, imgixParams: { fm: "jpg", auto: "compress, format" }) {
                ...GatsbyDatoCmsFluid
              }
            }
            duration
            podcast {
              url
            }
          }
          image {
            url
            fluid(maxWidth: 1240, imgixParams: { fm: "jpg", auto: "compress, format" }) {
              ...GatsbyDatoCmsFluid
            }
          }
          publishDate(formatString: "DD/MM/YYYY")
          slug
        }
      }
    }
    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default withLocale(Interviews)