src/templates/Jobs.js

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

class JobsPage extends Component {
  render() {
    const {
      data: {
        jobs: { edges: jobsEdges },
        jobTags: { edges: jobTagsEdges },
        experienceLevels: { edges: experienceLevelsEdges },
        background,
        subscribe,
      },
      pageContext: { locale },
    } = this.props

    return (
      <>
        <PageHelmet locale={locale} />
        <Header full={true} locale={locale} />
        <AllJobs
          jobs={jobsEdges}
          jobTags={jobTagsEdges}
          experienceLevels={experienceLevelsEdges}
          locale={locale}
          background={background}
        />
        <Subscribe locale={locale} subscribe={subscribe} />
        <Footer locale={locale} />
      </>
    )
  }
}

export const query = graphql`
  query Jobs($locale: String!) {
    jobs: allDatoCmsJob(filter: { locale: { eq: $locale } }) {
      edges {
        node {
          title
          description
          slug
          id
          tag {
            title
          }
          geolocation {
            latitude
            longitude
          }
          locationDescription
          companyName
          photo {
            id
          }
          companyLogo {
            url
            id
          }
          tag {
            title
          }
          experienceLevel {
            id
            title
          }
        }
      }
    }
    jobTags: allDatoCmsJobTag(filter: { locale: { eq: $locale } }) {
      edges {
        node {
          title
          locale
          id
        }
      }
    }
    experienceLevels: allDatoCmsExperienceLevel(filter: { locale: { eq: $locale } }) {
      edges {
        node {
          id
          title
        }
      }
    }
    background: file(relativePath: { eq: "duotone.png" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default JobsPage