Gatsby graphiQL - Cannot return null for non-nullable field ImageSharpFluid.src

Question

I'm using Gatsby and graphql with headless WordPress for a website.

I want to use a gatsby-image plugin to get srcSet and blurring effect for images that are coming from WordPress, but it throws an error in graphiQL playground. I want to explain below the whole process step by step for the best understanding.

The gatsby-image plugin has two types of responsive image fixed and fluid:

To decide between the two, ask yourself: “do I know the exact size this image will be?” If yes, it’s the first type. If no and its width and/or height need to vary depending on the size of the screen, then it’s the second type.

so, I need the second one - fluid.

It also has two image components Static and Dynamic.

If you are using an image that will be the same each time the component is used, such as a logo or front page hero image, you can use the StaticImage component.

If you need to have dynamic images (such as if they are coming from a CMS), you can load them via GraphQL and display them using the GatsbyImage component.

I'm using WordPress (which is CMS). So, I need the second one - Dynamic

Before writing a query, I must see how to make the right query for the files coming from the WordPress scheme.

For this reason, I found that Gatsby has a gatsby-source-wordpress plugin to pull images from WordPress.

I've installed and configured all the required packages such as gatsby-plugin-image,gatsby-plugin-sharp, gatsby-transformer-sharp, etc. I did Everything as exactly as the official docs say.

At that time everything was prepared to make a query, so I try the first example that they have in docs - pulling images from wordpress and IT WORKED.

So it's time to FINALLY GET WHAT I WANTED and try the second example (fluid), but IT FAILED with an error message Cannot return null for non-nullable field ImageSharpFluid.srcSet.

It also FAILS when I try to get gatsbyImageData

How could I fix this problem?

Thanks in advance.

*' # In the GraphQL explorer, use field names # like "src". In your site's code, remove them # and use the fragments provided by Gatsby. src'* — xadm, Apr 05 '21 at 20:44
notices/comments are about using image props ... they aren't public/strictly defined anymore ... shouldn't be tested in playground ... use image component or `console.log()` it in page/template to see props — xadm, Apr 06 '21 at 16:14
query with fragments, `localFile` logged? all nulled/some props? ... errors in build logs? what in component props or data-related requests? — xadm, Apr 06 '21 at 19:32

Henrik W. · Answer 1 · 2021-05-26T10:48:51.437

The documentation you mention for gatsby-source-wordpress is outdated. Checkout this one: https://www.gatsbyjs.com/plugins/gatsby-source-wordpress/

Your query looks like the old one. I'm not sure what plugin versions you are running, but if you are running the latest ones your query should look something like this:

query MyQuery {
  allWpPost {
    nodes {
      featuredImage {
        node {
          localFile {
            childrenImageSharp {
              gatsbyImageData(width: 200, placeholder: BLURRED, formats: [AVIF, WEBP, JPG])
            }
          }
        }
      }
    }
  }
}

Also the gatsby-image plugin is deprecated in favor of gatsby-plugin-image.

If you want an example of how the setup is put together you can search the starters for CMS:WordPress and v3 to find one to start with. Gatsby Starters

Hope this gets you started :)

score 1 · Answer 2 · answered Jun 22 '21 at 08:50

If You have used caching in your plugin options like the code below, Try deleting the .cache folder in your workspace and restart the server.

{
  resolve: `gatsby-source-wordpress`,
  options: {
    production: {
      hardCacheMediaFiles: true,
    },
  },
},

Probably It would take time fetching the images and then your page should load without any errors.

Gatsby graphiQL - Cannot return null for non-nullable field ImageSharpFluid.src

2 Answers2