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

【问题标题】：Process data from GraphQL query (with fragments) response?处理来自 GraphQL 查询（带有片段）响应的数据？
【发布时间】：2019-06-20 12:18:40
【问题描述】：

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

这是我们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 等不起作用)

【问题讨论】：

Team 组件在哪里？是在src/pages/ 里面吗？如果是非页面组件，则需要使用StaticQuery

标签： reactjs graphql gatsby

【解决方案1】：

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

这一行产生了那个错误：

const {边} = data.allMarkdownRemark;

尝试仅console.log 您的数据。你会看到你有属性{ missionControl: {}, wellington: {} }，因为你创建了带有别名的GraphQL查询，看看docs

【讨论】：