1

After several days of iterating around formatting and variables, I am still struggling to get this code to run and keep getting various errors similar to "Cannot read properties of undefined (reading 'map')"

I am only just setting out with the basics of Javascript and Gatsby so I could be missing an absolute howler? Go easy on me.

import React from "react"
import { graphql } from "gatsby"

//export default function Home() {
//  return <div>Hello world!
//<p>Is this working?</p>
//<h1>{process.env.AIRTABLE_API_KEY}</h1>
//<p>Is this working 2?</p>
//  </div>
//  
//}

export default ({data}) => {
  const allAirtableData = data.allAirtable.nodes;
  console.log(allAirtableData)
  return (
    <div>
          <h1>'Hello World'</h1>
         {
            allAirtableData.map((node) => (
                 <p>
                      <img src={node.data.Model_Type} alt="hills something" />
                      <a href={`/${node.recordID}`}>Click Here</a>
                  </p>
              ))
         }
    </div>
  )
}

export const query = graphql`
query AirtableQuery {
  allAirtable {
    edges {
      node {
        recordId
        data {
          Model_Type
        }
      }
    }
  }
}  
`
JagwireXKR
  • 11
  • 1

1 Answers1

0

Your GraphQL query shows a structure such as:

  allAirtable {
    edges {
      node {
        recordId
        data {
          Model_Type
        }
      }
    }
  }

What results in allAirtable.edges.node.

However, you are accessing directly the node in:

const allAirtableData = data.allAirtable.nodes;

Change it to:

const allAirtableData = data.allAirtable.edges.nodes;

The rest of the code should work alone.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • That should be `data.allAirtable.edges` not `data.allAirtable.edges.nodes` - i.e. just replace nodes with edges – rubie Sep 17 '21 at 11:11
  • `nodes` is the array, the iterable variable, if your solution is applied you'll need to change the loop to `allAirtableData.map(({node})` to destructure the iterable variable, which is also another solution tho – Ferran Buireu Sep 17 '21 at 11:15
  • 1
    That's perfect, thanks Ferran. I thought I had tried all variants of that, but this one nailed it! – JagwireXKR Sep 21 '21 at 12:22
  • I'm glad it helped. If the issue has been solved please consider accepting/upvoting the answer to close the issue – Ferran Buireu Sep 21 '21 at 12:52