-1

I'm working on a web app for a portfolio project: Using gatsbyjs, contentful and graphql to create an app to help people learn about japanese food.

However, I'm having trouble getting gatsby-image-plugin to find the graphql node to render images dynamically from contenful database.

I have tried different ways via getImage or simply passing something like

const image = data.contenfulSushiFish.fishImages

or

const image = data.contentfulSushiFish.fishImages.gatsbyImageData

etc... to <GatsbyImage src={image} alt........

but I keep getting a type error:

Uncaught TypeError: data.contentfulSushi is undefined


I have a node file that creates pages dynamically via gatsby-node.js and the code throwing the error is the sushi-fish.js template file where I'm running another similar graphql query that creates the individual pages.

Here's a link to the project that works without images: https://vigilant-varahamihira-b6f541.netlify.app/

import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { graphql, Link } from "gatsby"
import Layout from "../components/layout"

// THE SUSHI FISH COMPONENT FOR MAKING PAGES ETC
 
 export const query = graphql`
 query ($id: String) {
  contentfulSushiFish(id: {eq: $id}) {
    fishName
    commonName
    allergies
    whatToLookFor
    fishImages {
      gatsbyImageData(layout: CONSTRAINED, width: 125 )
      file {
        url
        fileName
        contentType
      }
    }
  }
}`

const Sushi = ({ data }) => {

  const sushi = data.contentfulSushiFish;
  const image = getImage(data.contentfulSushi.fishImages);

  return (
<Layout>
<Link to="/fish">BACK</Link>
<GatsbyImage image={image} alt={'alt text'} /> 

Yea, this code is where I'm at. I'm reaching for answers in the dark at this point.

Why doesn't GatsbyImage seem to be able to render the right node here?

My understanding is that gatsbyImageData, above, knows what to do if you point it in the right direction.

Any help with this will result in extreme joy, lol.

3
  • Seems like you tried to fetch contentfulSushiFish only in the query, but you are trying to get image from contentfulSushi. Do you have both contentfulSushiFish and contentfulSushi? If so you should add contentfulSushi to the graphql query as well.
    – hotcakedev
    Jan 2, 2022 at 18:43
  • Have you tried the query in the GraphiQL playground (localhost:8000/___graphql)? Can you share the Contentful plugin configuration? Jan 3, 2022 at 5:53
  • I fixed the typo and it still doesn't work. Sorry, I've been trying ANYTHING for a week or so. The query works well in ___graphql playground, too. I can see the src leading to the file I need on contenful. The pages are loading text data ok from Contentful. All the tutorials etc I've found all use a silly markdown blog which offers little help beyond the basics. Gatsby Image is not picking up the server-side info. Weird.. What am I possibly missing?
    – honeymkr
    Jan 3, 2022 at 23:22

1 Answer 1

0

Ok!

I got to the root of the issue.

My contentful model has a 'fishImages' field that accepts more than more image so the query data is returning an array.

This explains the simple 'type error' in console.

Here's the code snippet that works:

<GatsbyImage image={data.contentfulSushiFish.fishImages[0].gatsbyImageData} alt={'alt text'} />

So, if you're looking to use dynamic images from contentful or wordpress, etc ~ be aware of your model details as it may prove to be tricky to debug the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.