Querying Multiple file fields DatoCMS and Gatsby about gatsby-source-datocms HOT 7 CLOSED

import React from 'react'
import { Link } from 'gatsby'
import { graphql } from 'gatsby'

import Layout from '../components/layout'

const IndexPage = ( { data } ) => (
  <Layout>
    {
      data.house.gallery.map(photo => (
        console.log(photo.fluid.src)
      ))
    }
  </Layout>
)

export default IndexPage

export const query = graphql`
  query House($slug: String!) {
    house: datoCmsHouse(slug: { eq: $slug }) {
      slug
      id
      gallery {
        id
        fluid(maxWidth: 800) {
          src
          ...GatsbyDatoCmsFluid
        }
      }
    }
  }
`

import React from 'react'
import Link from 'gatsby-link'
import styled from "styled-components"
import Img from 'gatsby-image'
import graphql from 'graphql'
import MainContent from "../components/mainContent"
import Jumbo from "../components/jumbo"


const FacilitiesPage = ({ data }) => (
  <div>
Facilites here

{
  data.datoCmsAccomodationPage.imageGallery.map(photo => (
    console.log(photo.fluid.src)
  ))
}
  </div>
)

export default FacilitiesPage


export const query = graphql`
  query AccomsPageQuery {
    datoCmsAccomodationPage {
          mainHeading
          mainText
          subHeading
          imageGallery {
            id
            fluid(maxWidth: 800) {
              src
              ...GatsbyDatoCmsFluid
            }
          }
    }
  }
`

            {
        data.datoCmsAccomodationPage.imageGallery.map(photo => ( //This outputs correctly to the console
          console.log(photo.fluid.src)
        ))
      }

        
        {data.datoCmsAccomodationPage.imageGallery.map(({ photo }, index) => //Something wrong with this code
          <Col key={index} md="6" sm="12" className="mb-4">
          <Img fluid={photo.fluid.src} />
          </Col>
          )}