Querying Multiple file fields DatoCMS and Gatsby

[shansmith01]

Hi I am trying to query a multiple file field inside a collection it's a series of images and the result will be an image gallery. I have tried all manner of queries to make this happen but cant seem to query the images. Here is where I am at with my code.

My query is

`export const query = graphql`
  query AccomPageQuery($slug: String!) {
    datoCmsAccomodationPage(slug: { eq: $slug }) {
          mainHeading
          mainText
          subHeading
          headerImage {
            fluid(maxWidth: 600, imgixParams: { fm: "jpg", auto: "compress" }) {
              ...GatsbyDatoCmsFluid
            }   
          }
          imageGallery { // THIS IS MY GALLERY
            fluid {
              src
            }
          }
    }
  }`

I then try and pull this data like this for example (note I know the below will not yield an image. Im just trying to display any data at the moment relating to the image array)

{data.datoCmsAccomodationPage.imageGallery.map(({ fluid }, index) =>
          <Col key={index} md="6" sm="12" className="mb-4">
          <p className="px-3">{fluid.src}</p>
          </Col>

The result is

←→1 of 3 errors on the page TypeError: Cannot read property 'fluid' of null

Any help would be appreciated. This is doing my head in. I will be happy to write it up and add it to your docs when done

[matteoscurati]

Hi! Are you using Gatsby v2?

This works for me:

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
        }
      }
    }
  }
`

[shansmith01]

Thanks for getting back to me. still on the versions before V2

Updated with your code more or less and still getting a typeerror

Here is my code https://github.com/shansmith01/garden-burees-new/blob/master/src/templates/accommodation.js

Could it be that this is from a template file and creating dynamic pages? (here is my gatsby-node https://github.com/shansmith01/garden-burees-new/blob/master/gatsby-node.js)

[shansmith01]

More on this. If i take your code above (tweaked for my enviro) and put it on a regular page (ie not dynamically generated) as below, everything works. So the problem seems to be related to my code using createPages

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
            }
          }
    }
  }
`

[shansmith01]

And further to this I have now isolated the problem to this

            {
        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>
          )}

[stefanoverna]

This should be

data.datoCmsAccomodationPage.imageGallery.map(( photo, index) =>

Il mer 4 lug 2018, 19:59 Shannon Smith notifications@github.com ha scritto:

And further to this I have now isolated the problem to this

        {
    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>
      )}

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/datocms/gatsby-source-datocms/issues/22#issuecomment-402535559, or mute the thread https://github.com/notifications/unsubscribe-auth/AADJddnJDwWA887t76qbwt9_4_RtFa8jks5uDQJzgaJpZM4VBotT .

[shansmith01]

Thanks! I feel stupid. I guess that's the feeling before you learn something 👍

[stefanoverna]

:)