Process data from GraphQL query (with fragments) response?

Question

I'm building a site with React and Gatsby, and using GraphQL to get data from our Markdown files. For context, this problem is regarding our Team page that will organize all team members by section, so we want to render a different React component for each section ( Mission Control , Launch Team , Christchurch and Wellington ).

This is our query at the bottom of our 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 } } } } } `; 

And here is where we're trying to use the data object:

 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 

Our problem is: We're currently getting a TypeError: Cannot read property 'edges' of undefined and we don't know how to access in our JSX code the different member fields for each section ( data.missionControl , data.wellington etc. didn't work)

Answer 1

But it says you that don't have allMarkdownRemark property on the data object.

This line produces that error:

const { edges } = data.allMarkdownRemark;

Try just to console.log your data. You'll see that you have properties { missionControl: {}, wellington: {} } because you created GraphQL query with aliases, take a look at the docs