[gatsby-source-wordpress] featured_image is missing in GraphQL

[eduoliveira85]

Hey, while sourcing from a wordpress.com blog where all posts have a featured image, there's no such field within my query to pull. I have gatsby-transformer-sharp and gatsby-plugin-sharp installed. This is a sample of a node from allWordpressPost in my graphql:

I'd like to fetch those images to be able to process them thru gatsby-transform-sharp and I red it is possible, but can't figure out why it isn't working.

gatsby-config.js

require("dotenv").config({
  path: `.env`,
})
module.exports = {
  siteMetadata: {
    ( ... )
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `Rubik\:300,300i,400,400i,500,500i,700,700i` // you can also specify font weights and styles
        ],
        display: 'swap'
      }
    },
    {
      resolve: "gatsby-source-wordpress",
      options: {
        /*
         * The base URL of the WordPress site without the trailingslash and the protocol. This is required.
        baseUrl: "corpusfisioterapiapilates.wordpress.com",
        protocol: "https",
        restApiRoutePrefix: "wp-json",
        hostingWPCOM: true,
        useACF: false,
        acfOptionPageIds: [],
        auth: {
          wpcom_app_clientSecret: process.env.WORDPRESS_CLIENT_SECRET,
          wpcom_app_clientId: process.env.WORDPRESS_APP_CLIENTID,
          wpcom_user: process.env.WORDPRESS_USER,
          wpcom_pass: process.env.WORDPRESS_PASSWORD,
        },
        verboseOutput: false,
        perPage: 90,
        searchAndReplaceContentUrls: {
          sourceUrl: "https://source-url.com",
          replacementUrl: "https://replacement-url.com",
        },
        concurrentRequests: 10,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
        ],
        excludedRoutes: ["**/posts/1456"],
        keepMediaSizes: false,
        normalizer: function ({ entities }) {
          return entities
        },
normalizer option).
        normalizers: normalizers => [
          ...normalizers,
          {
            name: "nameOfTheFunction",
            normalizer: function ({ entities }) {
              // manipulate entities here
              return entities
            },
          },
        ],
      },
    },
    `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`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-typescript`,
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        postCssPlugins: [
          require("tailwindcss"),
          require("./tailwind.config.js")
        ]
      }
    },
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/app/*`] },
    }
    // `gatsby-plugin-offline`,
  ],
}

This is the repo. Can anyone kindly take a look at it and tell me if I'm doing it wrong? Thanks in advance!

[TylerBarnes]

Hi @edueter , it appears to be an authentication problem or a permissions issue for your WordPress.com instance.

If you look at the response from the REST api for posts https://public-api.wordpress.com/wp/v2/sites/corpusfisioterapiapilates.wordpress.com/posts?page=3

You can see in the first post (110), the featured media item is for an item with the id 111.

If we attempt to access that media item directly it requires authentication https://public-api.wordpress.com/wp/v2/sites/corpusfisioterapiapilates.wordpress.com/media/111

And further the same is true for listing all media items in WP. https://public-api.wordpress.com/wp/v2/sites/corpusfisioterapiapilates.wordpress.com/media

I believe it will work if these are public (they should be public).

One thing you should be aware of is that we're working on a full rewrite of gatsby-source-wordpress to use WPGraphQL instead of the REST api. This is for a variety of reasons but it means that soon using wordpress.com with Gatsby wont be supported (the current version of gatsby-source-wordpress will be deprecated). Perhaps one day WPGraphQL will be supported on wordpress.com, but for now it's not possible to use it this way.

You can find more info about it here https://github.com/gatsbyjs/gatsby/issues/19292

If you're interested in trying it, there's currently an alpha for the new integration at https://github.com/gatsbyjs/gatsby-source-wordpress-experimental

[eduoliveira85]

I believe it will work if these are public (they should be public). Yes, they should. Not sure why it is like this.

However, based on what you said after, maybe I should get an instance of WP installed somewhere so I could take advantage of the new features of V4.

You can find more info about it here #19292 Thanks for this link and your comment on this case.

I'm going to close this since there's no purpose anymore.