从 slug 构建错误创建的页面的 Contentful GraphQL 查询中检索数组

Question

我正在使用 React 和 Contentful 来构建一个应用程序，它使用 GraphQL 进行数据查询，我正在尝试检索 slug 创建的 'post' 样式页面上的数组。我能够提取静态数据，但我需要能够显示来自几个不同数组的内容，但我认为运行存在路由或解析问题。

我在下面创建了 GraphQL 查询：

export const pageQuery = graphql`
query CareerPageQuery($slug: String!) {
contentfulSite(id: { eq: "c898f54a-af7b-5e84-acd2-4a5ff6b0d086" }) {
  siteTitle
}
contentfulCareer(slug: { eq: $slug }) {
  title
  slug
  description
  thePerson {
    info {
      info
    }
  }
  theJob {
    info {
      info
    }
  }
  theExperience {
    info {
      info
    }
  }
  theRewards {
    info {
      info
    }
  }
  progression {
    progression
  }
  toApply {
    toApply
  }
}

} `

然后我创建变量，以便能够访问静态数据，例如标题和描述：

const career = get(this.props, 'data.contentfulCareer')

这让我可以像这样获取标题 {career.title} 但是当我尝试通过数组进行映射时它会抛出错误。

ERROR #85911  GRAPHQL

There was a problem parsing "website-name/src/templates/career.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

我通过数组映射如下：

{career.thePerson.map((value) => (
   {value.info.info}
))}

我似乎无法查明语法错误，或者是否存在我没有发现的整体错误。我可能漏掉了什么！

还有一条错误消息是这样说的：

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

website-name/src/templates/career.js: Unexpected token, expected "," (128:20)

  126 |             <CareerTitle>The Role:</CareerTitle>
  127 |             {career.thePerson.map((value) => (
> 128 |               {value.info.info}
      |                     ^
  129 |             ))}
  130 |             <CareerTitle>Responsibilities:</CareerTitle>
  131 |             {/*<CareerText dangerouslySetInnerHTML={{ __html: career.responsibilities.responsibilities}} />*/}

File: src/templates/career.js:128:20

Answer 1

您的地图中存在语法错误 return。不要将它括在大括号中，而是执行类似这样的操作。

    {career.thePerson.map((value) => value.info.info )}

从 slug 构建错误创建的页面的 Contentful GraphQL 查询中检索数组

Retrieving Array from Contentful GraphQL query for page created by slug build error

javascript

reactjs

graphql

contentful-api