来自GraphQL查询的处理数据（带有片段）响应？

Question

我正在使用React和Gatsby构建一个站点，并使用GraphQL从我们的Markdown文件中获取数据。 就上下文而言，此问题与我们的“团队”页面有关，该页面将按部分组织所有团队成员，因此我们希望为每个部分（ Mission Control ， Launch Team ， Christchurch和Wellington ）呈现不同的React组件。

这是我们在team.jsx底部的查询：

 export const query = graphql` query teams { missionControl: allMarkdownRemark( filter: { fileAbsolutePath: { regex: "/(/content/members/missionControl)/.*\\\\.md$/" } } ) { edges { node { ...memberFields } } } wellington: allMarkdownRemark( filter: { fileAbsolutePath: { regex: "/(/content/members/wellington)/.*\\\\.md$/" } } ) { edges { node { ...memberFields } } } } fragment memberFields on MarkdownRemark { id frontmatter { title cover { childImageSharp { fluid(maxWidth: 1000, quality: 90, traceSVG: { color: "#2B2B2F" }) { base64 tracedSVG aspectRatio src srcSet srcWebp srcSetWebp sizes originalImg originalName presentationWidth presentationHeight } } } } } `; 

这是我们尝试使用数据对象的地方：

 const Team = ({ data }) => { const { edges } = data.allMarkdownRemark; return ( <Layout> <Helmet title={'Team Page'} /> <Header title="Our Team"></Header> {edges.map(({ node }) => ( <MissionControlList key={node.id} title={node.frontmatter.title} cover={node.frontmatter.cover.childImageSharp.fluid} /> ))} // repeat {edges.map...} for the 3 other section lists 

我们的问题是：我们当前收到TypeError: Cannot read property 'edges' of undefined并且我们不知道如何在JSX代码中访问每个部分的不同成员字段（ data.missionControl ， data.wellington等。没用）

Answer 1

但是它说您在数据对象上没有allMarkdownRemark属性。

此行产生该错误：

const {edges} = data.allMarkdownRemark;

尝试仅console.log您的数据。 您会看到您具有属性{ missionControl: {}, wellington: {} }因为您使用别名创建了GraphQL查询，请查看文档