CODEWITHSUNDEEP
reactjsgraphqlgatsbycontentfulgatsby-image
Jeremy
Jeremy

Reputation: 21

Can't load in images from Contentful using GatsbyJS

First time posting here, but I've been struggling with this for a few days now.

Basically I have a graphQL query that pulls in product data from contentful and then display it on a GatsbyJS page. The query correctly displays for the title, price, and description of the product but it wont load in the image. Unfortunately I keep receiving errors such as:

"TypeError: Cannot read property '0' of undefined"

or

Cannot read property 'src' of undefined. (When changing the query to look at the src of an image. When I do this method, the url does have a value according to GraphiQL)

here's the code for the page I am currently working on:

import React from 'react'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '../components/Layout'
import './shop.scss'

const Shop = ({ data }) => {

    return (
        <Layout>
            <section>
              {data.allContentfulProducts.edges.map( ({ node }) => (
                <article key={node.id}>
                  <Img
                    fluid={node.images.fluid}
                  />
                  <p>{node.productName}</p>
                </article>
              ))}
            </section>
        </Layout>
    )
}

export const productQuery = graphql`
  query {
    allContentfulProducts {
      edges {
        node {
          id
          productName
          images {
            fluid {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

export default Shop

Upvotes: 2

Views: 1247

Answers (1)

Kingalione
Kingalione

Reputation: 4265

I think there is a problem with you graphQL Query. Try this one:

export const productQuery = graphql`
  query {
    allContentfulProducts {
      edges {
        node {
          id
          productName
          image {
            fluid {
              src
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

If this query is not helping please show us the structure of your contentful assets.

Upvotes: 0

Related Questions