來自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查詢，請查看文檔