src/templates/Podcatsts.js

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

class Podcasts extends Component {
  render() {
    const {
      data: {
        subscribe,
        podcasts: { edges: audios },
      },
      locale,
      changeLocale,
    } = this.props

    return (
      <div>
        <PageHelmet title="Podcasts" locale={locale} />
        <Header full={true} locale={locale} changeLocale={changeLocale} />
        <AudiosList audios={audios} locale={locale} />
        <Subscribe style={{ marginTop: '15px' }} locale={locale} subscribe={subscribe} />
        <Footer locale={locale} />
      </div>
    )
  }
}

export const query = graphql`
  query {
    podcasts: allDatoCmsPodcast {
      edges {
        node {
          title
          duration
          publishDate
          guest
          cover {
            url
            id
            fluid(maxWidth: 400, imgixParams: { fm: "jpg", auto: "compress, format" }) {
              ...GatsbyDatoCmsFluid
            }
          }
          podcast {
            url
          }
          slug
        }
      }
    }
    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default withLocale(Podcasts)