[gatsby-source-wordpress] – media sizes don't show in media_details

[kepi0809]

Description

in the rest API there is a sizes array which contains the same img in different resolutions. This is supposed to be in the graphql too but this isn't queryable (it's not there) and once it was null for all images.

Steps to reproduce

Create any post with image and try to query it on GraphiQL

Expected result

      media_details {
        sizes
      }

should be there and give back the data of the different resolutions

Actual result

it's not there, it will be underlined with red and error msg that it doesn't exist

Environment

System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 74.0.3729.131
Safari: 12.1
npmPackages:
gatsby: ^2.3.24 => 2.3.24
gatsby-awesome-pagination: ^0.3.4 => 0.3.4
gatsby-plugin-feed: ^2.2.0 => 2.2.0
gatsby-plugin-google-analytics: ^2.0.13 => 2.0.18
gatsby-plugin-lodash: ^3.0.5 => 3.0.5
gatsby-plugin-netlify: ^2.0.13 => 2.0.13
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-postcss: ^2.0.7 => 2.0.7
gatsby-plugin-purgecss: ^3.1.1 => 3.1.1
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-sass: ^2.0.11 => 2.0.11
gatsby-source-wordpress: ^3.0.58 => 3.0.58
npmGlobalPackages:
gatsby-cli: 2.5.12

[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! 💜

[kepi0809]

hey I'll try to make a reproduction asap, the problem is that it used to work in the beginning and then suddenly (without changing anything) no more. But I'll try to make it.

[jonniebigodes]

@kepi0809 i've been checking your issue.

Based on a recent issue i was tackling, i've used my local wordpress installation and Gatsby.

I've used a simple hello world starter with the following content in gatsby-config.js

{
  .....
  "dependencies": {
    "gatsby": "^2.5.2",
    "gatsby-image": "^2.1.0",
    "gatsby-plugin-sharp": "^2.0.37",
    "gatsby-source-wordpress": "^3.0.61",
    "gatsby-transformer-sharp": "^2.1.19",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "prettier": "^1.17.1"
  }
}

My gatsby-config.js looks like the following:

module.exports = {
  /* Your site config here */
  plugins:[
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve:`gatsby-source-wordpress`,
      options:{
        baseUrl: `localhost/wordpress/`,
        hostingWPCOM: false,
        protocol:`http`,
        useACF:false,
        auth:{},
        verboseOutput: false,
        includedRoutes: [
          "/*/*/posts",
          "/*/*/media",
        ],
      }
    }
  ]
}

Issued gatsby develop and opened a new browser window to http://localhost:8000/___graphql and issued the following query with the following result as you can see below:

Upon checking the code and i might be wrong, but it could be that the node is deleted as per this if you go over the code you'll see that some nodes will be deleted and the image handling is done by gatsby-source-filesystem and depending on your case it will be available with gatsby-image and the underlying dependencies gatsby-plugin-sharp and gatsby-transformer-sharp

[kepi0809]

hey @jonniebigodes yeah that's might be it, I'll check it today or tomorrow and give you feedback, but it's most probably, because I used to have these plugins but removed them because of too long build process (I used childimagesharp too and it made the build more than 30 minutes long)

Thanks for the tipp, I would've never thought that these plugins might be required for that too. 👍

[kepi0809]

@jonniebigodes I tried as you suggested with these 3 plugins. This might be part of the problem, but it didn't solve it completely.

gatsby develop stucks now by source and transform nodes for eternity and it also fails on uncountable images with a warning: warning Failed to process remote content.

I checked the endpoint of the images once again and one image has media_details that look like this: media_details: { }, so an empty object. This is btw the first img that comes from the API, could this be the source of all problems?

[violy]

Hey, seeing your Failed to process remote content warnings, you may see my issue #13073 and PR #13110

During my issue resolution, I've observe this warning for many problems on download request — 404, 500 responses — and timeout.

[jonniebigodes]

@kepi0809 can you share at least the wordpress part of gatsby-config.js so that i can take a look at it? @violy it could be the case yes, that's why i want to check out im more detail to confirm or not if that's the case.

[kepi0809]

yes I think the Failed to process remote content warnings were fixed by @violy 's PR thank you for that again. I was until now not really aware of how easy one can change an npm package and customise it for one's own use case.

I found that in the wordpress plugin they delete the sizes on purpose, so this way they enforce the users to use the sharp plugins and make modifications on the localfile etc… This might be a good approach if you don't pay for the build time and don't modify it too often either, but it's not my case.

Although I think with the right caching mechanism on deployhq I could just cache all the images in the .cache folder I haven't dove into this so deep yet to be honest. But using wordpress' own sizes is just easier and faster for development, and after the project is already up and working then could one further improve it with these sharp plugins.

So I'm not so sure if it's a good idea of the WP plugin not giving a boolean value for removing the sizes attribute just doing it under the hood.

So my problem can easily be fixed just by commenting out a line of code in the

node_modules/gatsby-source-wordpress/normalize.js

exports.downloadMediaFiles =
/*#__PURE__*/
function () {
  var _ref = (0, _asyncToGenerator2.default)(function* ({
    entities,
    store,
    cache,
    createNode,
    createNodeId,
    touchNode,
    getNode,
    _auth
  }) {
    return Promise.all(entities.map(
    /*#__PURE__*/
    function () {
      var _ref2 = (0, _asyncToGenerator2.default)(function* (e) {
        let fileNodeID;

        if (e.__type === `wordpress__wp_media`) {
          const mediaDataCacheKey = `wordpress-media-${e.wordpress_id}`;
          const cacheMediaData = yield cache.get(mediaDataCacheKey); // If we have cached media data and it wasn't modified, reuse
          // previously created file node to not try to redownload

          if (cacheMediaData && e.modified === cacheMediaData.modified) {
            const fileNode = getNode(cacheMediaData.fileNodeID); // check if node still exists in cache
            // it could be removed if image was made private

            if (fileNode) {
              fileNodeID = cacheMediaData.fileNodeID;
              touchNode({
                nodeId: fileNodeID
              });
            }
          } // If we don't have cached data, download the file


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

              if (fileNode) {
                fileNodeID = fileNode.id;
                yield cache.set(mediaDataCacheKey, {
                  fileNodeID,
                  modified: e.modified
                });
              }
            } catch (e) {// Ignore
            }
          }
        }

        if (fileNodeID) {
          e.localFile___NODE = fileNodeID;
          // delete e.media_details.sizes;
        }

        return e;
      });

      return function (_x2) {
        return _ref2.apply(this, arguments);
      };
    }()));
  });

  return function (_x) {
    return _ref.apply(this, arguments);
  };
}();

PS.: I removed my last comment that had the gatsby-config.js in it @jonniebigodes because it isn't needed anymore.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

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.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!