featuredImage does not appear in GraqhiQL , Gatsby

Question

i am trying to develop a blog site for myself.and i decided to make it with gatsby and contentful. and i followed this tutorial

query code

query MyQuery {
  allContentfulBlogPost {
    edges {
      node {
        author {
          name
        }
        createdAt
        body {
          body
        }
        title 
        featuredImage {
          file {
            url
          }
        }
      }
    }
  }
}

output :

"message": "Cannot query field \"featuredImage\" on type \"ContentfulBlogPost\".",

why featuredImage does not appear in allContentfulBlogPost ? and how can i find it ?

my gatsby-config.js file:

plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-image`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 740,
        wrapperStyle: `margin-bottom: 2.2rem;`,
      },
    },

i already added gatsby-image and gatsby-remark-images but it didnt help.

if you have any idea about this topic please respond.

any response would be appreciated

score 1 · Answer 1 · answered Aug 04 '20 at 17:21

Gatsby provides GraphQL to fetch data without remark.

import { graphql } from "gatsby"

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    contentfulBlog(slug: { eq: $slug }) {
      blogTitle
      blogImage {
        fluid (maxWidth: 500) {
          ...GatsbyContentfulFluid_withWebp
        }
        title
        resize {
          src
          width
          height
        }
      } 
    }
  }
`

As you can see the query, you can fetch images using fluid or fixed. I fetched image using fluid and webp since webp image type is a perfect choice for Lighthouse score. And use Img tag(not img) to display image.

<Img fluid={post.blogImage.fluid} alt={post.blogImage.title} />

https://www.gatsbyjs.org/packages/gatsby-image/

Ferran Buireu · Answer 2 · 2020-08-02T16:26:53.967

The issue comes from Contentful side, it breaks before reaching your Gatsby app (when gathering data) that's why your gatsby-remark-images doesn't fix it.

When dealing with images in Contentful you must upload a dummy image for your new schema (featuredImage). Just an image to be retrieved with GraphQL query. Afterwards you can replace this image for your definitive content.

This is because internally, GraphQL schema is not able to infer the type of an image (it may happen with other fields too of other types) if you don't upload it at least once for your allContentfulBlogPost content model. It's a known bug that must be bypassed by this way until they fix it.

featuredImage does not appear in GraqhiQL , Gatsby

2 Answers2