Retrieving images from Contentful -Not seeing child image sharp in graphql playground - graphql

Question

I am still new to Gatsby and Graphql and am trying to go through tutorials of using gatsby-transformer-sharp, gatsby-plugin-sharp, and gatsby-plugin-image to retrieve images from Contentful using graphql and map over those images. In all of the tutorials I have read and watched, they have the option of "child image sharp" in their playground and I do not have that.
This is what graphql looks like
This is what my plugins look like
Would someone be able to help or walk me through how my query should look and how to map over that data in the query to retrieve those images?
Thank you so much!

Answer 1

It depends on when are those tutorials done or recorded. Gatsby image has suffered a lot of breaking changes since its creation (see migration Gatsby 2 to 3) changing from gatsby-image to gatsby-plugin-image.
As you can see in gatsby-source-contentful docs you don't always need childImageSharp. It depends on the node you are quyering:
{
allContentfulCaseStudy {
edges {
node {
id
slug
title
subtitle
body {
body
}
heroImage {
title
description
gatsbyImageData(layout: CONSTRAINED)
# Further below in this doc you can learn how to use these response images
}
}
}
}
}
Source: gatsby-source-contentful docs
As long as your GraphQL contains gatsbyImage and gatsbyImageData means that the transformers (gatsby-transformer-sharp) and sharps (gatsby-plugin-sharp) are doing their job.
Your query will rely on your data structure, check the tutorials to understand better, keeping in mind that your data will be under props.data.allContentfulCarousel of the page, but it looks that Images is an array of images, hence you will need to make another loop through it in order to render the GatsbyImage component passing each image.