Обрабатывать данные из ответа на запрос GraphQL (с фрагментами)?

Question

Я создаю сайт с помощью 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 и т. Д. Не работает)

Answer 1

Но это говорит о том, что у вас нет свойства allMarkdownRemark для объекта данных.

Эта строка выдает эту ошибку:

const {edge} = data.allMarkdownRemark;

Попробуйте просто console.log ваши данные. Вы увидите, что у вас есть свойства { missionControl: {}, wellington: {} }, поскольку вы создали запрос GraphQL с псевдонимами, взгляните на docs