How to integrate Airtable source plugin with Gatsby Image component

Other Questions Airtable
1

I am currently working with gatsby-source-airtable to fetch images from my Airtable database. I’ve set up my gatsby-config file to map the attachment field as a file node like so:

mapping: {'image': 'File'}

When I test this in GraphiQL, everything appears to function correctly. The following query executes successfully:

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

And it returns this response:

{
  "data": {
    "airtable": {
      "data": {
        "image": {
          "localFiles": [{
            "childImageSharp": {
              "fluid": {
                "src": "/static/08baa0d1735184a4d0dd141d90f564d4-28158c2eb0b0b748efeabc0ec551c623-7eb65.jpg"
              }
            }
          }]
        }
      }
    }
  }
}

The image is shown correctly when I navigate to the source URL directly. However, when I attempt to integrate it with the Gatsby Image component:

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

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

I encounter this error: WebpackError: TypeError: Cannot read property ‘fluid’ of undefined. What could be leading to this problem? Any guidance would be appreciated!

2

The problem is you’re trying to access childImageSharp directly on localFiles, but it’s an array. Since Airtable attachments can have multiple files, you need to target a specific index. Change your code to <Img fluid={post.data.image.localFiles[0].childImageSharp.fluid} /> to grab the first image. I’d add a safety check though: {post.data.image.localFiles.length > 0 && <Img fluid={post.data.image.localFiles[0].childImageSharp.fluid} />}. This stops the undefined error when there’s no images. Had this exact issue last year and this fixed it completely.