feat: gracefully handle empty image URL fields

[moneal]

How do you handle a source that may or may not have a value for a field?

I have content sourced from a Google Spreadsheet, this spreadsheet has a column called img with a URL to a publicly accessible image. This column might be null or have a string.

To debug the setup I configured the plugin without a defined rawURLKey and produced this error:

Error when resolving URL value for node type googleReviewsSheet. This probably means that the rawURLKey function
in gatsby-config.js is incorrectly set. Please read this project's README for detailed instructions on how to
set this correctly.

Potential images were found at these paths:
 - img
   Set following configuration options:
     rawURLKey: 'img'
     URLPrefix: 'https:'

When configuring the plugin with the suggestions and settings I think are correct, like this:

{
  resolve: `@imgix/gatsby`,
  options: {
    domain: "example.imgix.net",
    secureURLToken: "abc123",
    sourceType: ImgixSourceType.WebProxy,
    defaultImgixParams: { auto: "format,compress" },
    fields: [
      {
        nodeType: "googleReviewsSheet",
        fieldName: "imgixImage",
        rawURLKey: "img",
        URLPrefix: "https:",
      },
    ],
  },
},

The following error is thrown and the build or develop task crashes.

Error when resolving URL value for node type googleReviewsSheet. This probably means that the rawURLKey function 
in gatsby-config.js is incorrectly set. Please read this project's README for detailed instructions on how to 
set this correctly.

Everything seems to work fine if the source has a string populated for every record.

Fragment partial that for getting image data:

{
  ...
  id
  verifiedPurchase
  rating
  imgixImage {
    gatsbyImageData(
      imgixParams: {
        fit: "crop"
        crop: "faces,entropy"
        fill: "blur"
        w: 280
        h: 200
      }
      width: 282
      height: 200
      placeholder: DOMINANT_COLOR
    )
  }
}

Pre version 2 it seemed possible to work around the error by using something likegetURL: (node) => node.img || 'https://example.com/file.jpg'

[sherwinski]

Hey @moneal and thanks for opening this issue. I've noted this question in our team's backlog so that we can set some time aside to look into it soon. I'll be sure to follow up with any updates or questions here.

[luqven]

Hey @moneal I wanted to take a second to follow up on this.

Because configuration functions are no longer possible in Gatsby V4, we can no longer accept getURL() as a function. You can read more about this in our migrating to V2 README section.

That being said, I want to better understand your need here. Do you mind explaining to me the use case for trying to resolve the rawURLKey on a node that doesn't have said key, IE node.img on a node that doesn't have an img? Is this a development environment need?

From your comment, it sounds like you'd like to opt-out of actually retrieving the field value when the node in question has no image.

[luqven]

I'm going to go ahead and close this issue, but should anything else come up please do comment and I'll be sure to open it again.

[moneal]

I'm going to go ahead and close this issue, but should anything else come up please do comment and I'll be sure to open it again.

Thank you for your time. I indeed was wanting to opt-out when the node had no image. This was for an older project and no longer an issue for me but might be for someone else in the future.

[luqven]

Thanks for getting back to me @moneal!

I'm going to leave this ticket open to gauge interest in this feature. If anyone else would like to see this added, please comment or react to this post. That will help us measure community interest and prioritize this accordingly.