Gatsby引用Airtable导入的查询报map相关undefined错误如何解决？

错误原因 #

• 数据结构不匹配：你在GraphQL查询中声明allAirtable返回edges字段，但组件内直接读取data.allAirtable.nodes，该字段不存在所以值为undefined，调用map方法时就会触发报错。Gatsby Airtable插件的返回结构中，nodes和edges是同级字段，要么调整查询直接返回nodes，要么组件内遍历edges取内部的node。
• 字段名大小写不匹配：查询中定义的记录ID字段是recordId（末尾d小写），但组件中读取时写为recordID（末尾D大写），取值会返回undefined。

修复后的完整代码 #

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

export default ({data}) => {
  // 读取查询返回的edges字段
  const allAirtableEdges = data.allAirtable.edges;
  console.log(allAirtableEdges)
  return (
    <div>
          <h1>'Hello World'</h1>
         {
            allAirtableEdges.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
        }
      }
    }
  }
}  

如果你更习惯直接读取nodes字段，也可以将GraphQL查询调整为直接返回nodes，不需要修改组件的取值逻辑：

query AirtableQuery {
  allAirtable {
    nodes {
      recordId
      data {
        Model_Type
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者JagwireXKR