Integrating Airtable source plugin with Gatsby Image component

Other Questions Airtable
1

I’m working with gatsby-source-airtable to fetch photos from an Airtable database. I’ve set up the filenode mapping in my gatsby-config file like this:

mapping: {'photo': 'fileNode'}

When I test in GraphiQL, everything works fine. This query runs successfully:

{
  airtable(table: {
    eq: "products"
  }, data: {
    name: {
      eq: "sample-item"
    }
  }) {
    data {
      photo {
        localFiles {
          childImageSharp {
            fluid(maxWidth: 300) {
              src
            }
          }
        }
      }
    }
  }
}

And returns:

{
  "data": {
    "airtable": {
      "data": {
        "photo": {
          "localFiles": [{
            "childImageSharp": {
              "fluid": {
                "src": "/static/abc123def456-image-processed.jpg"
              }
            }
          }]
        }
      }
    }
  }
}

But when I try to use this data with the Gatsby Image component:

<Img fluid={item.data.photo.localFiles.childImageSharp.fluid} />

export const pageQuery = graphql`
  query ItemQuery {
    airtable(table: {
      eq: "products"
    }, data: {
      name: {
        eq: "sample-item"
      }
    }) {
      data {
        photo {
          localFiles {
            childImageSharp {
              fluid(maxWidth: 300) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`

I get this error: TypeError: Cannot read property 'fluid' of undefined

What could be causing this issue? Any help would be great!

2

I encountered a similar issue not long ago. The key is to understand that localFiles is an array; when accessing childImageSharp, you must refer to a specific file. Here’s how you can adjust the code:

<Img fluid={item.data.photo.localFiles[0].childImageSharp.fluid} />

It’s also wise to implement a safety check for situations where the array might be empty or where image processing could fail:

{item.data.photo.localFiles && item.data.photo.localFiles[0] && item.data.photo.localFiles[0].childImageSharp && (
  <Img fluid={item.data.photo.localFiles[0].childImageSharp.fluid} />
)}

This adjustment resolved the same error I faced with Airtable attachments. GraphiQL might show the data correctly, but remember that your component requires access to a specific element of the array.

3

This happens because Gatsby processes images differently during build vs development. I hit this exact issue with Airtable attachments last year. GraphiQL shows the processed images, but there’s usually a timing problem where your component renders before image processing finishes.

Besides the array indexing issue mentioned above, double-check your gatsby-config.js has the right Airtable plugin setup. Use the latest gatsby-source-airtable version - older ones were inconsistent with file processing.

Image format’s another common problem. Some Airtable images don’t get processed properly by Sharp if they’re weird formats or have unusual dimensions. Test with a simple JPEG first to figure out if it’s a data structure issue or image processing problem. Also check your browser’s network tab to make sure the image files are actually downloading locally during development.