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
            }
          }
        }
      }
    }
  }
`

这是来自游乐场查询的结果数据

{
  "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>

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

1 个答案: