Gatsby: [gatsby-source-wordpress] `localFile` field null on *some* featured media from wordpress posts

[edgarrmondragon]

Description

When querying featured media from wordpress posts, some images get their corresponding localFile node created but others do not, giving me a localFile = null. Weirdest thing is this error occurs on different sets of images on development and production (netlify).

Steps to reproduce

The graphql query I'm using to get the posts data:

    query {
      allWordpressPost(sort: { fields: [date] , order: DESC }, limit: 10) {
        edges {
          node {
            id
            title
            date
            featured_media {
              id
              source_url
              localFile {
                id
                childImageSharp {
                  fixed(width: 400, height: 400) {
                    ...GatsbyImageSharpFixed
                  }
                }
              }
            }
          }
        }
      }
    }

My wordpress plugin config inside gatsby-config.js:

    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "iq.tlahtolli.com",
        protocol: "https",
      }
    }

I've also prepared a public repo which reproduces this exact problem.

Expected result

I should have node.featured_media = null for posts with no featured media, I have no problem with that, but I expect posts that do to have the corresponding image, to have it available as localFile.

Actual result

localFile is null for posts that have featured media.

Environment

• System:
  
  
  
  • OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
  
  
  • CPU: x64 AMD A8-7410 APU with AMD Radeon R5 Graphics
  
  
  • Shell: 5.4.2 - /usr/bin/zsh
  
  
• Binaries:
  
  
  
  • Node: 10.13.0 - /usr/bin/node
  
  
  • Yarn: 1.12.1 - /usr/bin/yarn
  
  
  • npm: 6.4.1 - /usr/bin/npm
  
  
• Browsers:
  
  
  
  • Chrome: 70.0.3538.77
  
  
  • Firefox: 63.0
  
  
• npmPackages:
  
  
  
  • gatsby: ^2.0.19 => 2.0.19
  
  
  • gatsby-image: ^2.0.20 => 2.0.20
  
  
  • gatsby-plugin-manifest: ^2.0.5 => 2.0.5
  
  
  • gatsby-plugin-offline: ^2.0.11 => 2.0.11
  
  
  • gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
  
  
  • gatsby-plugin-sharp: ^2.0.7 => 2.0.7
  
  
  • gatsby-source-filesystem: ^2.0.4 => 2.0.4
  
  
  • gatsby-source-wordpress: ^3.0.13 => 3.0.13
  
  
  • gatsby-transformer-sharp: ^2.1.4 => 2.1.4
  
  

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[kristojorg]

Did you ever find a solution here? I am seeing the same issue for gatsby-source-shopify. Can't tell if it's because my internet is bad right now and failing to download the images or what.

[LoicUV]

I found two issues leading to this error :

• Featured media uploaded ON a post are bound to it, and if the post status is set to private, the media is no longer returned by wp json api (even if you try to use the media on another post)
• Media filename containing diacritics or non URL safe characters

For more investigation, you can add a console log in gatsby-source-wordpress downloadMediaFiles method in normalize.js file :

if (!fileNodeID) {
      try {
        const fileNode = await createRemoteFileNode({
          url: e.source_url,
          store,
          cache,
          createNode,
          createNodeId,
          parentNodeId: e.id,
          auth: _auth,
          reporter
        });

        if (fileNode) {
          fileNodeID = fileNode.id;
          await cache.set(mediaDataCacheKey, {
            fileNodeID,
            modified: e.modified
          });
        }
      } catch (e) {// Ignore
        console.log(e) // ---------------- add this -----------------
      }
    }
  }

It allowed me to find the wrong url: http.... error

[dlbnco]

@LoicUV thanks! Not sure which problem I had exactly but re-uploading the media on WordPress worked.

[rafanoli]

Same problem here and this happens with random images, there is no pattern.

[kushal9291]

I had so many images so i had to run npm run develop multiple times to get all the images