Optional data with Strapi & Gatsby

Questions and Answers
1
System Information
  • Strapi Version: 4.1.9
  • Operating System: Windows 10
  • Database: SQLite
  • Node Version: 16.14.0
  • NPM Version: 8.6.0

I’ve been trying to get a Gatsby website to work with Strapi as backend. I’m having issues with making it possible to have optinal data. In Strapi I’ve set a field for an image which could be left empty. When there is an image everything is fine and I can access the image url from Gatsby using a GraphQL query.

However if the image is empty Gatsby shows an error. I tried creating a type in gatsby-node.js, but can’t seem to do it properly. Either the query gets the data from Strapi, but if there is no data it gives me an error. Or when I try the code below the query always returns null even if there is an image added in Strapi, but it also doesn’t give an error when there is no image.

exports.createSchemaCustomization = ({ actions }) => {
	const { createTypes } = actions;
	const typeDefs = `
      type STRAPI_HOME_PAGE implements Node {
        aboutSectionImage: STRAPI__MEDIA
      }
    `;
	createTypes(typeDefs);
};

What is the correct way of adding a type definition, so the query returns the image url when there is one, but if there isn’t an image returns null?

2

I was having to same issue. I found that the type naming was what broke this.
If you were to use strapiHomePage rather than STRAPI_HOME_PAGE that should allow the optional type. This does seem to break the Typescript definition creation if you’re trying to use the non nullable options.

2 Likes
3

Thank you so much! I cannot test it at the moment since I kinda rebuild the whole project with Next.js & used the REST API :rofl:, but I’m going to mark it as the solution.