index.js

import React from 'react'

const IndexPage = ({ data }) => (
  <div className="Catalogue">
    {
      data.products.edges.map(({ node: product }) => (
        <div className="Catalogue__item" key={product.id}>
          <a href="#" className="Product">
            <div className="Product__image">
              <img src={product.image.url} />
            </div>
            <div className="Product__details">
              <div className="Product__name">
                {product.name}
                <div className="Product__price">
                  {product.price}€
                </div>
              </div>
              <span className="Product__buy">Buy now</span>
            </div>
          </a>
        </div>
      ))
    }
  </div>
)

export default IndexPage

export const query = graphql`
query CatalogueQuery {
  products: allDatoCmsProduct {
    edges {
      node {
        id
        name
        price
        image {
          url
        }
      }
    }
  }
}
`