Gatsby: localFile is crashing GraphQL queries (wordpress, ACF)

[filipetedim]

Description

The localFile property in image queries under ACF from [gatsby-source-wordpress] just isn't there. What's weirder is that it's working for all other queries and images I have.
E.g. one query that works is the blog posts:

node {
  acf {
    blog_post_title
    blog_post_type
    blog_post_main_image {
      localFile {
        childImageSharp {
          sizes(maxWidth: 800) {
            ...GatsbyImageSharpSizes_withWebp
          }
        }
      }
    }
    blog_post_date
    blog_post_owner
    blog_post_content
  }
}

However, when querying the jobs:

node {
  id
  slug
  acf {
    job_title
    job_location
    job_salary_range
    job_logo {
      localFile {
        childImageSharp {
          sizes {
            ...GatsbyImageSharpSizes_withWebp
          }
        }
      }
    }
    job_added_date
  }
  categories {
    wordpress_id
  }
}

Then I get the error:

GraphQL Error There was an error while compiling your site's GraphQL queries.
Invariant Violation: GraphQLParser: Unknown field localFile on type jobLogo_4. Source: document JobsQuery file: GraphQL request.

What I have also found, is that the image is not anywhere to be found in the .cache/gatsby-source-filestream folder. I went through every single image file, and it's not there.

More relevant information:

• The ACF field is an image with type Image Object
• The ACF field is exactly the same as for the blog posts image
• This was working before and it started crashing only now
• I've deleted my .cache folder and nothing changed`

I've read @KyleAMathews 's response somewhere about localFile:

Gatsby dynamically creates the schemas from your data source(s).
With this in mind, I've thought that our blog content manager has removed all jobs currently, as we've filed them all out, and then added a new one. Did Gatsby somehow save that jobs don't even exist anymore in their schema? And now that I've added new jobs it just doesn't recognise them as such? But that were true, I've deleted the .cache since and it's not working yet.

Steps to reproduce

Not sure how to reproduce exactly.
I've only got this issue with one image from all of my wordpress, but the closest I can get to it is

• Create a post with an image on wordpress with ACF, with that image field required
• Add an image to it and save + publish
• Try to get with gatsby-source-filestream
• Delete all the posts in wordpress that this query would fetch
• Try getting it again
• Repeat step 1
• Repeat step 3 and it should crash your query

Expected result

To receive the localFile, which means the image would have been locally cached.

Actual result

localFile property does not exist in query nor the image file exists in .cache/gatsby-source-filesystem.

Environment

Using wordpress and gatsby with gatsby-source-wordpress, macOS.

[m-allanson]

Thanks for the detailed report @filipetedim. That does sound strange... Are you able to create a repo that demonstrates the problem? Alternatively maybe there's some useful info in https://github.com/gatsbyjs/gatsby/issues/2492?

[filipetedim]

I've already read all of #2492 before, no help there. I can't really set it up. It happens on my current repo but only randomly and on certain images as said. What, besides trying to create a repo, would be the best way to showcase it?

[Khristophor]

Hey folks, I think myself and @dannywils have figured this out within the scope of our projects that are throwing this issue.

Quick check to see if this solution will apply is to visit the REST endpoint for the specific media item that's not found (/wp-json/wp/v2/media/[$id]), in our case it displays the following:

   {  
      "code":"rest_forbidden",
      "message":"You don't have permission to do this.",
      "data":{  
         "status":403
      }
   }

The underlying (seemingly random) issue, was how the image was originally added to the WordPress media library. When an image is first uploaded, it receives a post_parent value based on the post it's attached to. If the parent post isn't public (or in our case, a non-standard post type registered via a plugin) the media item won't be accessible through the REST API.

The quick and dirty fix is to update the post_parent to 0 on the offending media item in the wp_posts table, which should allow it to be viewed through the REST API. There's a patch coming for core detailed here.

[Khristophor]

@filipetedim did my solution above help you out at all? Are you still seeing an issue?

[filipetedim]

Sorry I completely forgot to come back here as I have more projects at the company. I will check on next week (tomorrow day off) and I will come back but it does make sense! God damn nice finding

[crgeary]

I can confirm this same problem on my test site, and switching the post parent to 0 does indeed fix the issue. Although this does mean media items are no longer children of the current page. Which is probably ok in 99% of cases.

Nice work on the debugging, that's a real subtle one.

[Khristophor]

@m-allanson is there somewhere in the docs for "known issues" in case someone else runs into this? Or should I just put it in the source-wordpress readme?

[crgeary]

@Khristophor there is a troubleshooting section in the WordPress Source Plugin Readme. Probably best to go into there :)

Is this something you would be interested in making a PR for?

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress#troubleshooting

[Khristophor]

@crgeary sure, I'll get a PR open for it.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[TN1ck]

I just had this issue and my problem was in the includeRoutes. I didn't include "**/media". This should be included in the docs somewhere, maybe I'm doing a PR later.

[robinmetral]

Thank you @TN1ck, you solved my issue too! Please submit this PR, or I will :wink: