Question

我正在使用React和Gatsby构建一个站点，并使用GraphQL从我们的Markdown文件中获取数据。就上下文而言，此问题与我们的团队页面有关，该页面将按部分组织所有团队成员，因此我们想为每个部分（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等等都没用）

Answer 1

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

此行会产生该错误：

const {edges} = data.allMarkdownRemark;

仅尝试console.log您的数据。您会看到您具有属性{ missionControl: {}, wellington: {} }，因为您使用别名创建了GraphQL查询，请查看https://docs.djangoproject.com/en/2.1/topics/http/urls/#url-namespaces-and-included-urlconfs

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

1 个答案: