如何引用从 Airtable 导入的查询？

Question

在围绕格式和变量进行了几天的迭代后，我仍在努力让这段代码运行并不断收到类似于“无法读取未定义的属性（读取'map'）”的各种错误

我只是开始学习 Javascript 和 Gatsby 的基础知识，所以我可能会错过一个绝对的咆哮者吗？对我放轻松。

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
        }
      }
    }
  }
}  
`

Answer 1

您的 GraphQL 查询显示如下结构：

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

allAirtable.edges.node 的结果是什么。

但是，您正在直接访问node：

const allAirtableData = data.allAirtable.nodes;

改成：

const allAirtableData = data.allAirtable.edges.nodes;

其余的代码应该单独工作。