gatsby-plugin-image missing image prop

Question

In using my CMS, Cosmic JS, gatsby-plugin-image is missing the image prop.

The div.data-gatsby-image-wrapper no longer exists since I upgraded from Gatsby 3 to 4.

This is my GraphQL query. I get null with local...

export const searchPageQuery = graphql`
  query PostSearchQuery {
    allCosmicjsPosts {
      edges {
        node {
          title
          slug
          id
          content
          metadata {
            subtitle
            image {
              local {
                childImageSharp {
                  gatsbyImageData(
                    layout: FULL_WIDTH,
                    placeholder: BLURRED,
                    aspectRatio: 1.3
                  )
                }
              }
            }
          }
        }
      }
    }
  }
`

{local: null}

I am still receiving all other data from Cosmic JS like title, slug, metadata.subtitle, etc...just not the image.

I've also noted this error in my terminal:

RequestError: Client network socket disconnected before secure TLS
connection was established

When I checked the image URL in my console, I noticed that Cosmic JS is not returning a valid image. I get a 403 error.

But I noticed that when I change from my query to this...

export const searchPageQuery = graphql`
  query PostSearchQuery {
    allCosmicjsPosts {
      edges {
        node {
          title
          slug
          id
          content
          metadata {
            subtitle
            image {
              imgix_url
            }
          }
        }
      }
    }
  }
`

...from image/local/childImageSharp/gatsbyImageData to image/imgix_url, I actually do get access (sort of) to a valid image coming through from Cosmic JS. In my console log, from console.log(post.metadata.image), I get this...

{imgix_url: 'https://imgix.cosmicjs.com/23b8e5f0-b766-11ec-a642…95085ee56f-01-...-cover.jpg'}
imgix_url
: 
"https://imgix.cosmicjs.com/23b8e5f0-b766-11ec-a641-7195085ee56f-01-...-cover.jpg"
[[Prototype]]
: 
Object

I get 2 different images in my console log. The first image {imgix_url: 'https://imgix.cosmicjs.com/23b8e5f0-b766-11ec-a642…95085ee56f-01-...-cover.jpg'} is INVALID (403 error), while the second image https://imgix.cosmicjs.com/23b8e5f0-b766-11ec-a642-7195085ee56f-01-...-cover.jpg is a VALID image coming in from Cosmic JS.

gatsby-plugin-image missing image prop

0 Answers0