How can I reference a query imported from Airtable?

user_16921710 0
Viewed 45

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
        }
      }
    }
  }
}  
`
airtable gatsby
1 Answers

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.

user_55853710
Related