Using Gatsby Image with Airtable source plugin: Troubleshooting fluid property issues

Other Questions Airtable
1

Hey everyone, I’m having trouble with the gatsby-source-airtable plugin and Gatsby Image. I’ve set up my gatsby-config to map the image column as a fileNode. GraphiQL shows that the gatsby image plugins are working fine. I can query the image data and get a response with the src.

But when I try to use it with gatsby-image like this:

<Img fluid={post.data.image.localFiles.childImageSharp.fluid} />

I get an error saying ‘Cannot read property ‘fluid’ of undefined’.

Here’s my GraphQL query:

query PostQuery {
  airtable(table: {eq: "table-1"}, data: {slug: {eq: "test-1"}}) {
    data {
      image {
        localFiles {
          childImageSharp {
            fluid(maxWidth: 400) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

Am I missing something? Any ideas what could be causing this? Thanks for your help!

2

hey, i ran into this too. make sure ur using the right field name from airtable. sometimes the api name is different from what u see in the table. also, check if the image field is actually populated in airtable. empty fields can cause weird errors. good luck!

3

I encountered a similar issue when working with Gatsby and Airtable. The problem might be that ‘localFiles’ is an array, not a single object. Try modifying your JSX like this:

<Img fluid={post.data.image.localFiles[0].childImageSharp.fluid} />

This assumes you’re only expecting one image. If you have multiple, you’ll need to map over them.

Also, ensure your Airtable column is set up correctly to handle attachments. Sometimes, the issue can be on the Airtable side if the image data isn’t being pulled correctly.

Lastly, double-check your gatsby-config.js to make sure the fileNode mapping is correct. Small typos there can cause big headaches later on.

4

I’ve been down this road before, and it can be frustrating. One thing that helped me was wrapping the Img component in a conditional render. Something like:

{post.data.image?.localFiles?.[0]?.childImageSharp?.fluid && (
  <Img fluid={post.data.image.localFiles[0].childImageSharp.fluid} />
)}

This way, if any part of the chain is undefined, it won’t throw an error. It’s a bit verbose, but it’s saved me countless headaches.

Also, make sure you’re handling the case where the image might not exist in Airtable. Sometimes, empty fields can cause unexpected behavior. You might want to add a default image or placeholder if that’s a possibility in your data.

Lastly, double-check your Airtable permissions. I once spent hours debugging only to realize I didn’t have the right access to the attachment field. Hope this helps!