How do I reference an imported Airtable query in my project?

Other Questions Airtable
1

Facing errors while mapping an Airtable query’s data. Below is a revised sample:

import React from 'react';
import { graphql } from 'gatsby';

const AirtableDisplay = ({ data }) => {
  const recordsArray = data.allRecords.nodes;
  return (
    <section>
      {recordsArray.map((record) => (
        <div key={record.id}>
          <img src={record.fields.ModelType} alt='model image' />
          <a href={`/${record.uid}`}>See More</a>
        </div>
      ))}
    </section>
  );
};

export default AirtableDisplay;

export const fetchRecords = graphql`
  query FetchRecordsQuery {
    allRecords {
      nodes {
        uid
        fields {
          ModelType
        }
      }
    }
  }
`;
2

try using console.log(data) to inspect the node structure. i found that sometimes airtable fields dont match exactly, so reevaluate your names and query. might be a small typo issue in your component too.

3

I encountered a similar problem where the data structure from Airtable didn’t exactly match my expectations in the component. After a fair amount of debugging, I realized that the error was in the way I accessed the child properties of each node. Re-inspecting the output of my GraphQL query in the GraphiQL interface helped me identify a slight mismatch in naming conventions between the actual data and what I was referencing in the component. Adjusting the device by ensuring type consistency and using proper destructuring resolved the issue.