Having a hard time with Featured Images

I’m really struggling to pull through featured images. I’m hoping I’m just doing something stupid or missing something.

So this is my query in PostList.js:

export const pageQuery = graphql`
  fragment PostListFields on wordpress__POST {
    id
    title
    excerpt
    author {
      name
      slug
      avatar_urls {
        wordpress_48
      }
    }
    date(formatString: "MMMM DD, YYYY")
    slug
    featured_media {
      localFile {
        childImageSharp {
          fluid(maxWidth: 1200){
            ...GatsbyImageSharpFluid
        }
      }
    }
  }
}
`

And I don’t know if I’m wrong, but this is how I get my image:

<Img fluid={post.featured_media.localFile.childImageSharp.fluid}  />

And I’ve even tried:

<img src={post.featured_media.localFile.childImageSharp.src} />

What I end up with is an error that says:

TypeError: Cannot read property 'localFile' of null

And if I console.log(posts), I can even see the images:

featured_media:
localFile:
childImageSharp:
fluid:
aspectRatio: 1.7777777777777777
base64: "data:image/jpeg;base64,/9j/2wBDABALDA4MCh...etc etc 
sizes: "(max-width: 800px) 100vw, 800px"
src: "/static/cdffa355894ff255a99fe00bb5586590/b17c1/outsource-online-marketing1.jpg"
srcSet: "/static/cdffa355894ff255a99fe00bb5586590/00e5e/outsource-onl

I would be so grateful if someone could maybe just point me in the right direction!

[chmac]

@ibjorn If you copy and paste exactly this into the GraphiQL explorer, it should not return any data:

  fragment PostListFields on wordpress__POST {
    id
    title
    excerpt
    author {
      name
      slug
      avatar_urls {
        wordpress_48
      }
    }
    date(formatString: "MMMM DD, YYYY")
    slug
    featured_media {
      localFile {
        childImageSharp {
          fluid(maxWidth: 1200){
            ...GatsbyImageSharpFluid
        }
      }
    }
  }
}

The reason is it’s just a fragment. It’s not a query. You also need a query.

What you posted second looks like the correct data. But somehow you need to tell GraphQL which post you want, so you get the correct post data for that page.

Look at the starter here for example:

https://github.com/GatsbyCentral/gatsby-starter-wordpress/blob/0b89898aea7b872011ee23cd380809ccbc6e7548/src/templates/page.js#L49-L56

It has a query ..., the fragment ... part is not enough on its own. You can use the fragment inside of a query.

[ibjorn]

@chmac Yeah, I’m going to have to brush up a bit on that. Gatsby has been my first introduction to GraphQL, so I’m still finding my way around. What I was trying to do is add featured images to the blog feed and category list.