Query null values crashes build process

[adiusz]

In reference to this issue: https://github.com/directus/gatsby-source/issues/38#issuecomment-654204268

I'm generating pages in gatsby-node based on records in datoCMS, but not all records has the same fields filled. I have a problem with signle-asset fields. When some record doesn't have this field filled, it crushes my website with: TypeError: can't access property "url", data.datoCmsProduct.technicalSpec is null

What I try to do, is conditional rendering elements if they has that specific field filled. I tried to add this to my gatsby-node, but it didn't work.

module.exports.sourceNodes = ({actions}) => {

  const { createTypes } = actions;

  // Notice the casing of the type name is proper.
  const typeDefs = `
    type technicalSpec implements Node {
      url: String!
    }
  `;

  createTypes(typeDefs);

}

How can I solve this problem?

[matjack1]

hey @adiusz if you always need the picture, why don't you add a validation for that? Would that solve your problem?

[adiusz]

hi @matjack1

what do you mean I always need the picture? Thing is, I have 4 asset fields, but not every record has these 4 fields filled. Some has 2 of them, some has 4. So when I run 'gatsby develop' my site is crushing because I get null from these fields which are not filled. How can I prevent this?

[matjack1]

if the field is empty we don't pass on an object with all the empty properties. Either the field is required or is not. If it's not you should check on the frontend if the content is there before accessing the properties.

The alternative is to use a modular content with a modular block with an image, so that you can iterate over the images, but I'm not sure if this applies to your content?

[adiusz]

Filed is not required, because not every record has that specific field filled. It does not make problems with e.g. string fields, but it does with signle asset field. I'm trying to do some conditional rendering like this:

{
 data.datoCmsProduct.technicalSpec.url !== null &&
            <a href={data.datoCmsProduct.technicalSpec.url} target="_blank" rel="noopener noreferrer" download>
              <Doc>
                Informacja <br/> techniczna
              </Doc>
            </a>
            }

And I have 4 differents single asset fields, like that:

query WorkQuery($slug: String!, $locale: String!) {
          datoCmsProduct(slug: { eq: $slug }, locale: { eq: $locale }) {
              technicalSpec {
                  url
              }
              instruction {
                  url
              }
              declaration {
                  url
              }
              booklet {
                  url
              }
          }

But some pages (these with missing some of the fields) are not generating. I read about this issue and I know it can be done with schema customization, but I can't figure it out. If I can tell Gatsby that it's ok to get null from that query, it would solve my problem.

[matjack1]

can you try checking if data.datoCmsProduct.technicalSpec exists, without the .url?

[matjack1]

if you can share your code to me (support@datocms.com) I'll have a look :)

[adiusz]

Well, it works without .url, like that:

{ 
          data.datoCmsProduct.technicalSpec !== null &&
            <a href={data.datoCmsProduct.technicalSpec.url} target="_blank" rel="noopener noreferrer" download>
              <Doc>
                Informacja <br/> techniczna
              </Doc>
            </a>
}

Such a dummie thing.

Thanks a lot @matjack1, peace :)

[matjack1]

Awesome!