如何在gatsby中使用reactjs和graphql映射嵌套数组

npm install gatsby-plugin-react-helmet react react-dom
npm install gatsby-source-filesystem gatsby-transformer-remark

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    `gatsby-transformer-remark`,
  ],
}

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

export const query = graphql`
  query {
    markdownRemark {
      frontmatter {
        nestedArray {
          field1
          field2
        }
      }
    }
  }
`

const DataPage = ({ data }) => {
  const nestedArray = data.markdownRemark.frontmatter.nestedArray

  return (
    <div>
      {nestedArray.map(item => (
        <div key={item.field1}>
          <p>Field 1: {item.field1}</p>
          <p>Field 2: {item.field2}</p>
        </div>
      ))}
    </div>
  )
}

export default DataPage