How can I render contentful images dynamically in my gatsby portfolio website

Question

I have been struggling to render images from contentful in my gatsby site. I have used gatsby-plugin-image to render the image from contentful. I cannot dynamically render the images. please help me.

I import

import { GatsbyImage, getImage } from "gatsby-plugin-image"

my graphQL query is.

const data = useStaticQuery(graphql`
    query {
      allContentfulBooks(sort: { bookTitle: ASC }) {
        edges {
          node {
            bookTitle
            author
            date(formatString: "MMMM Do, YYYY")
            type
            bookCover {
              gatsbyImageData(
                width: 300
                placeholder: NONE
                quality: 75
                layout: CONSTRAINED
              )
            }
            slug
            summary
          }
        }
      }
      contentfulBookHeading {
        heading
        mainText {
          raw
        }
      }
    }
  `)

I try to render the book Cover here

<ol>
        {data.allContentfulBooks.edges.map((edge) => {
          const image = getImage(edge.node.bookCover.gatsbyImageData)
          return (
            <li className={bookStyles.books}>
              <div className={bookStyles.bookThumbnail}>
                <div className={bookStyles.bookCover}>
                  <GatsbyImage src={image} alt="Book Cover" />
                </div>
                <div>
                  <Link to={`/book/${edge.node.slug}`}>
                    <h3 className={bookStyles.title}>{edge.node.bookTitle}</h3>
                  </Link>
                  <h5 className={bookStyles.author}>
                    Author: {edge.node.author}
                  </h5>
                  <h6 className={bookStyles.type}>Type: {edge.node.type}</h6>
                  <p className={bookStyles.date}>Date Read: {edge.node.date}</p>
                  <p className={bookStyles.summary}> {edge.node.summary}</p>
                  <Link to={`/book/${edge.node.slug}`}>
                    <p className={bookStyles.fullnotes}>Read full book notes</p>
                  </Link>
                </div>
              </div>
              <hr />
            </li>
          )
        })}
      </ol>

I tried to render the book cover image from contentful. but it's not working

Answer 1

My first thought when reading your ask was that you are looking to load data dynamically, as in at load time, my original answer would work for that. After rereading your question, I believe you are not having difficulty loading data dynamically at load time but, rather you are not seeing the images display using the useStaticQuery and loading the data at build time.

Steps to ensure you should see the media:

open http://localhost:8000/___graphql in a browser and run your query, ensure you see the media you are expecting.

If you do not see the media:

First, check Contentful and ensure that the media is published.

Next, try stopping your app and restarting it, ctrl c should cancel the running command, then start the site back up. This will ensure that you content is pulled in and ready to render.

If you see the media in graphical, my next suggestion is to debug your site and console.log the data. Try putting in console logs

console.log("gatsbyImageData", edge.node.bookCover.gatsbyImageData)
const image = getImage(edge.node.bookCover.gatsbyImageData)
console.log("image", image)

next open up the developer menu in your browser and click on console

reload the page and verify the output of the console logs. This should help you ensure that data is present.

If you are having a dynamic rendering issue the answer is, useStaticQuery, grabs all of your Contentful data at build time. This is by design and is part of why Gatsby is so fast. You will need to use something like Apollo in order to grab dynamic data in Gatsby. Check out this article that provides more details and a possible solution.