I’ve been working on this for days and keep getting “Cannot read properties of undefined (reading ‘map’)” errors when trying to use Airtable data in my Gatsby project.
I’m pretty new to both JavaScript and Gatsby, so I might be making some basic mistake. I’ve tried different approaches with formatting and variables but nothing seems to work.
import React from "react"
import { graphql } from "gatsby"
export default ({data}) => {
const airtableRecords = data.allAirtable.edges;
console.log(airtableRecords)
return (
<div>
<h1>Welcome to my site</h1>
{
airtableRecords.map((record) => (
<div key={record.node.recordId}>
<img src={record.node.data.Product_Name} alt="product image" />
<a href={`/details/${record.node.recordId}`}>View Details</a>
</div>
))
}
</div>
)
}
export const pageQuery = graphql`
query GetAirtableData {
allAirtable {
edges {
node {
recordId
data {
Product_Name
}
}
}
}
}
`
Any ideas what I’m doing wrong here? The query looks right to me but I keep getting these undefined errors.
I’ve encountered this exact issue multiple times when working with Gatsby and external data sources. The problem is definitely that your component is trying to access data before it’s available during the build process. What worked for me was implementing proper null checking at the component level. Instead of just checking airtableRecords, you should verify that data exists first. Try modifying your component like this: const airtableRecords = data?.allAirtable?.edges || []; This uses optional chaining and provides a fallback empty array. Another thing I discovered is that during development, the GraphQL layer sometimes returns partial data or null values, especially if your Airtable connection isn’t stable. You might also want to check your Airtable base permissions and API key configuration. I had a case where my query was syntactically correct but the plugin couldn’t fetch data due to authentication issues, resulting in similar undefined errors. The console.log you have should help identify whether you’re getting null data or if the structure is different than expected.
Been there with Gatsby builds failing on undefined data. Your GraphQL query structure looks fine, but I bet this is happening during the build process when Gatsby tries to render pages before all data is fetched.
Here’s what usually fixes it for me:
export default ({data}) => {
if (!data || !data.allAirtable) {
return <div>Loading...</div>
}
const airtableRecords = data.allAirtable.edges;
// rest of your component
}
I always add this check at the top now because Gatsby’s static generation can be unpredictable with external APIs.
Also, double check your gatsby-node.js file. Sometimes the Airtable plugin needs explicit page creation logic, especially if you’re dealing with dynamic routes. I’ve seen cases where the plugin works fine in development but breaks during build because of timing issues.
One more thing - test your GraphQL query in the Gatsby GraphiQL explorer (usually at localhost:8000/___graphql) to make sure it returns the exact structure you expect. Sometimes Airtable field names get transformed by the plugin and don’t match what you think they should be.
This error typically happens when the GraphQL query hasn’t finished loading yet or when there’s a mismatch in your query structure. I ran into something similar when I was setting up my first Gatsby site with external APIs. The component renders before the data is available, causing the undefined error. You need to add a conditional check before mapping over the data. Try wrapping your map function like this: {airtableRecords && airtableRecords.map((record) => ( // your existing map content ))}. Also check what’s actually being returned by logging data itself, not just airtableRecords. Sometimes the query structure doesn’t match what you expect and the data might be nested differently. I’d also verify that your Airtable plugin is properly configured in gatsby-config.js and that you’re using the correct field names from your Airtable base.
had this same headache with gatsby + airtable last month. quick fix is to check if data.allAirtable?.edges exists before trying to map. but also make sure your airtable plugin is actually running during build - sometimes it silently fails and you get empty data. check your terminal output for any airtable connection errors during gatsby develop.