Gatsby: Gatsby-image failed prop type

[imlastrebor]

Description

I try to get my WP posts' featured images to post site. I followed this tutorial and now I'm able to see featured image on the site but I also get this warning:

index.js:2177 Warning: Failed prop type: Invalid prop `fixed` supplied to `Image`.
    in Image (at BlogPost.js:17)
    in BlogPostTemplate (created by HotExportedBlogPostTemplate)
    in AppContainer (created by HotExportedBlogPostTemplate)
    in HotExportedBlogPostTemplate (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:127)
    in _default (at app.js:65)

BlogPost.js file:

// src/templates/BlogPostTemplate.js
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"
const BlogPostTemplate = ({ data }) => (
  <Layout>
    <SEO
      title={data.wordpressPost.title}
      description={data.wordpressPost.excerpt}
    />
    <h1>{data.wordpressPost.title}</h1>
    <p>
      Written by {data.wordpressPost.author.name} on {data.wordpressPost.date}
    </p>
    <Img
      fixed={data.wordpressPost.featured_media.localFile.childImageSharp.fixed}
      alt={data.wordpressPost.title}
      style={{ maxHeight: 450 }}
    />
    <div
      style={{ marginTop: 20 }}
      dangerouslySetInnerHTML={{ __html: data.wordpressPost.content }}
    />
  </Layout>
)
export default BlogPostTemplate
export const query = graphql`
  query($id: Int!) {
    wordpressPost(wordpress_id: { eq: $id }) {
      title
      content
      excerpt
      date(formatString: "MMMM DD, YYYY")
      author {
        name
      }
      acf {
        work_name
      }
      featured_media {
        localFile {
          childImageSharp {
            fixed(width: 300, height: 300) {
              src
              width
              height
            }
          }
        }
      }
    }
  }
`

gatsby-config.js file:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "http://localhost:8888/GatsbyWP/",
        protocol: "http",
        hostingWPCOM: false,
        useACF: true,
        acfOptionPageIds: [],
        verboseOutput: false,
        perPage: 100,
        searchAndReplaceContentUrls: {
          sourceUrl: "http://localhost:8888/GatsbyWP/",
          replacementUrl: "https://localhost:8001",
        },
        concurrentRequests: 10,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
          "**/*/*/menus",
          "**/*/*/menu-locations",
        ],
        excludedRoutes: [],
        normalizer: function({ entities }) {
          return entities
        },
      },
    },
    `gatsby-plugin-sitemap`,
  ],
}

I searched this kind of problem and it seems that this is not common thing. Hope that here someone can help with this.
Thanks in advance!

[matowang]

Try this instead, just as the tutorial wrote.

childImageSharp {
    fixed(width: 300, height: 300) {
        ...GatsbyImageSharpFixed
    }
}

Or for fixed you can choose one of these

• GatsbyContentfulFixed
• GatsbyContentfulFixed_noBase64
• GatsbyContentfulFixed_tracedSVG
• GatsbyContentfulFixed_withWebp
• GatsbyContentfulFixed_withWebp_noBase64

[freiksenet]

Thank you for answering this @matowang!

To expand on this - you need more fields in fixed that you have provided. Gatsby has built-in fragments that have all the fields that Img component needs.

[imlastrebor]

Yeah, that works. Thanks @matowang !

[tony]

GatsbyImageSharpFixed

Just in case anyone happens upon this issue:

Carried forward, I'm using graphql inside of a gatsby-node -> createPages -> await graphql. No fragments are available there apparently?

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown fragment "GatsbyImageSharpFixed".

File: gatsby-node.js:72:9

My workaround from @djm is this:

fixed(width: 400) {
    base64
    width
    height
    src
    srcSet
}

Link: https://github.com/gatsbyjs/gatsby/issues/9882#issuecomment-462089503

Fragments: https://github.com/gatsbyjs/gatsby/blob/26582d31ab14f7bac6d5738e4245ceca2e6d411d/packages/gatsby-transformer-sharp/src/fragments.js#L6

[lifeeric]

@matowang Thanks that worked for me!