如何在多个帖子中输出带有数组的 datocms graphql 查询

Question

我正在使用 DatoCMS 作品集 gatsby 云自动生成模板。我已经能够成功地更改 DataCMS 中反映在我的 graphQL 操场中的一些模型，然后我可以调整我的代码以反映这些更改。现在这个模型是针对帖子的，所以有多个帖子，现在我卡住的部分是，我为每个帖子添加了一个模块化组件，它在 graphQL 返回的数据中创建了一个数组，而我不能当我已经在映射它包含的所有帖子时，我的生活弄清楚了如何彻底映射它。

这是我的代码，我正在尝试从details.task输出数据

import React from 'react'
import { Link, graphql } from 'gatsby'
import Masonry from 'react-masonry-component'
import Img from 'gatsby-image'
import Layout from "../components/layout"

const IndexPage = ({ data }) => (
  <Layout>
    {/* <Masonry className="showcase"> */}
      {data.allDatoCmsPricing.edges.map(({ node: pricing }) => (
        <div key={pricing.id} className="">
          <figure className="card">
            {/* <Link to={`/works/${work.slug}`} className="card__image">
              <Img fluid={work.coverImage.fluid} />
            </Link> */}
              <h6 className="card__title">
                <Link to={`/works/${pricing.slug}`}>{pricing.title}</Link>
              </h6>
              <div className="card__description">
                <p>{pricing.excerpt}</p>
              </div>
              {{pricing.details.task}}//Tasks go here, I know this wont work
          </figure>
        </div>
      ))}
    {/* </Masonry> */}
  </Layout>
)

export default IndexPage

export const query = graphql`
  query IndexQuery {
    allDatoCmsPricing(sort: { fields: [position], order: ASC }) {
      edges {
        node {
          id
          title
          slug
          excerpt
          details{
            task
          }
          coverImage {
            fluid(maxWidth: 450, imgixParams: { fm: "jpg", auto: "compress" }) {
              ...GatsbyDatoCmsSizes
            }
          }
        }
      }
    }
  }
`

这是来自 Playground 查询的结果数据

{
  "data": {
    "allDatoCmsPricing": {
      "edges": [
        {
          "node": {
            "id": "DatoCmsPricing-1913799-en",
            "title": "Silver",
            "slug": "flyer-1",
            "excerpt": "European minnow priapumfish mosshead warbonnet shrimpfish bigscale. Cutlassfish porbeagle shark ricefish walking catfish glassfish Black swallower.",
            "details": [
              {
                "task": "Client Consultation"
              },
              {
                "task": "S.M.A.R.T Goal Setting"
              },
              {
                "task": "Fitness Assessment"
              },
              {
                "task": "Client Centered Exercises"
              },
              {
                "task": "1-2 Sessions per week"
              }
            ]
          }
        },
        {
          "node": {
            "id": "DatoCmsPricing-1913807-en",
            "title": "Packaging 1",
            "slug": "packaging-1",
            "excerpt": "Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.",
            "details": []
          }
        },
        {
          "node": {
            "id": "DatoCmsPricing-1913806-en",
            "title": "Stationery 1",
            "slug": "stationery-1",
            "excerpt": "User experience deployment MVP ecosystem direct mailing. Creative iteration early adopters research & development partnership buyer investor innovator success scrum project validation graphical user interface termsheet mass market.",
            "details": []
          }
        }
      ]
    }
  }
}

Answer 1

在其他来源的帮助下，以下是我想要输出任务的内容

<ul className="details-list">{pricing.details.map(detailEntry => { 

  return <li key={detailEntry.id}><span>{detailEntry.task}</span></li>

 })}</ul>