Gatsby: Not All Wordpress Featured Images Are Returned

[mpaccione]

I am making a query like this below. However, despite having featured images on all the posts in the database it only returns the source_url for a few of them. Maybe 10%. I don't understand what could be the issue as to why it returns only some.

export const pageQuery = graphql`
  query {
    allWordpressPage {
      edges {
        node {
          id
          title
          excerpt
          slug
        }
      }
    }
    allWordpressPost {
      edges {
        node {
          title
          excerpt
          slug
          featured_media {
            source_url
          }
          categories {
            name
          }
          tags {
            name
          }
        }
      }
    }
  }
`

I am using the gatsby-source-wordpress plugin. I have custom post types but am only looking to query the regular post types which have these featured images.

{
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseUrl: `mpaccione.com`,
        protocol: `http`,
        // is it hosted on wordpress.com, or self-hosted?
        hostingWPCOM: false,
        // does your site use the Advanced Custom Fields Plugin?
        useACF: false,
      }
    },

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[mpaccione]

Alrighty, thanks for the reply.

I have gone and used the default repo to create a minimal reproduction where I just output media in list items on the index page.

If featured_media is empty I output "no featured media" if not I output the url.

https://github.com/mpaccione/gatsby-debug

You can see in this screenshot that the featured media is there but if you run the repo it is not included...

https://pasteboard.co/J5PbJo6.png

[mpaccione]

So I needed to move the Database side of the website to a subdomain which I have put here:
http://www.agencydb.giddyuppupsf.com/

I also upgraded to the latest wordpress and switched to the standard 2020 theme. It uses that themes functions.php file and I have a stock .htaccess file.

Adding, Removing, the images has no effect in making them appear.

I have cleared the gatsby cache and there are no Wordpress plugins.

I can see the featured_media urls here: http://www.agencydb.giddyuppupsf.com/wp-json/wp/v2/posts

[jasonbahl]

@mpaccione the WP REST API considers media that doesn't have a post_parent set to be private, so Gatsby cannot consume them.

For example, on Post 134 (http://www.agencydb.giddyuppupsf.com/wp-json/wp/v2/posts/134) the featured media is id 69.

However, that media is not available via the REST API: http://www.agencydb.giddyuppupsf.com/wp-json/wp/v2/media/69

You can see we get the response:

{
  "code": "rest_forbidden",
  "message": "Sorry, you are not allowed to do that.",
  "data": {
    "status": 401
  }
}

The source of this in WordPress core is here: https://core.trac.wordpress.org/browser/tags/5.4/src/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php#L1492

Since images are set with the status "inherit", WordPress attempts to read permissions from the Parent Post and "inherit" permissions from there. But, since there is no parent post, the permissions are assumed to be private, so the media item is not displayed in the REST API.

I never fully understood this execution.

If an image is used and presented on a Post it's already a public entity. As is the case for you, where the image is publicly viewable here:

http://www.agencydb.giddyuppupsf.com/2020/04/12/news-poll/

I'm not sure there's even an easy way to filter this behavior of the WP REST API to make images that have no parent (or the parent is not published) to be public in the API.

---

New WordPress Source Plugin

All that said, we are working on gatsby-source-wordpress-v4 which will be using WPGraphQL instead of the WP REST API.

WPGraphQL _does_ allow you to query media via the API, so images used on Posts, even if uploaded without a parent, can be accessed by Gatsby.

You can read more about the new source plugin here: https://github.com/gatsbyjs/gatsby/issues/19292

And find an example repository that uses it here: https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental

[jasonbahl]

@mpaccione I'm going to close this issue, as there's nothing actionable on the Gatsby side to resolve it. If you are able to get the WP REST API to expose the image endpoints publicly, Gatsby should work well with the images.

[mpaccione]

Wow! Thanks so much in demystifying this Jason.

I'm quite surprised that the REST API doesn't allow this functionality. Really basic, right? Standard Post with a Category and a Featured Image.

I have to launch this website and I'm in too deep now. I already pivoted from Frontity to Gatbsy when I ran into an under the hood lodash bug on theirs because they do manual tree shaking.

I will have to use the experimental today and see if it checks out. Thank you!

[mpaccione]

Okay in downloading Tylers Repo and following the steps.

I uploaded the plugins to the site. I then changed the url to http://agencydb.giddyuppupsf.com/graphql and receive an error: Unable to connect to WPGraphQL

However, if you manually navigate to that link it looks like it is working.

I made an issue here: https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental/issues/12

[mpaccione]

I've fixed my issue (Last Comment I swear ;) )

For all who run into this issue simple install this plugin here:
https://wordpress.org/plugins/better-rest-api-featured-images/

Then change your query to:

export const pageQuery = graphql`
  query {
    allWordpressPage {
      edges {
        node {
          id
          title
          excerpt
          slug
        }
      }
    }
    allWordpressPost {
      edges {
        node {
          title
          excerpt
          slug
          better_featured_image {
            source_url
          }
        }
      }
    }
  }
`