使用 Gatsby/Contentful 从 Graphql 获取参考数据

Question

我正在努力从我的 Graphql 的参考部分获取数据。 我得到了一个内容丰富的内容 model，其中包含参考，您可以在下面的查询中看到。

现在，我得到了一个像这样的简单页面，我在其中从 Contentful 查询数据：

import React from "react"
import { graphql } from "gatsby"

const PageTemplate = ({
    data: {
        islands: {
            id,
            title,
            featuredActivities: { id, title },
        },
    },
}) => {


    return (
                                    <article key={id}>
                                        <div>
                                            <h3>{title}</h3>
                                        </div>
                                    </article>

                                    <article key={featuredActivities.id}>
                                        <div>
                                            <h3>{featuredActivities.title}</h3>
                                        </div>
                                    </article>
    )
}

export const query = graphql`
query GetSinglePage($slug: String) {
  islands: contentfulPage (slug: {eq: $slug}) {
        id
        title
        featuredActivities {
            id
            title
            category
            price
            image {
              fluid {
                ...GatsbyContentfulFluid
              }
            }
          }
      }
  }
`
export default PageTemplate

现在我想获取这部分查询的数据：

featuredActivities {
            id
            title
            category
            price
            image {
              fluid {
                ...GatsbyContentfulFluid
              }
            }
          }

我试过这个：

const PageTemplate = ({
    data: {
        islands: {
            featuredActivities: { id },
            featuredActivities: { title },
        },
    },

并将其添加到：

<article key={featuredActivities.id}>
  <h3>{featuredActivities.title}</h3>
</article>

但它不起作用，有人知道我做错了什么吗？

提前致谢

[![在此处输入图像描述][1]][1]

Answer 1

现在我想获取这部分查询的数据

您不能像这样解构数组的所有项目：

const PageTemplate = ({
    data: {
        islands: {
            featuredActivities: { id },
            featuredActivities: { title },
        },
    },

为什么？ 因为它是一个对象数组，并且结构 ( {} ) 与嵌套项的类型不匹配。 而且，如果是这样，您将需要输入每个特定的 position。

您可能需要：

const PageTemplate = ({
    data: {
        islands: [{
            featuredActivities: { id },
            featuredActivities: { title },
        }],
    },

注意环绕方括号 ( [] )。

但是，正如我所说，这并不理想，因为您需要打印未知长度数组的每个特定 position。 最好和最优的解决方案是解构直到featuredActivities并循环遍历所有元素：

const PageTemplate = ({
    data: {
        islands: {
            id,
            title,
            featuredActivities,
        },
    },
}) => {


    return <>
     {featuredActivities.map(({title, id})=>{
       return <div key={id}>{title}</div>
     })}
    </>
}

通过这种方式，您可以在({title, id})中的同一循环内进行解构，因为您正在获取每个特定的 position（ featuredActivity ，可迭代变量）、 title和id （等等）的 rest必填字段）。

Answer 2

假设Islands和featuredActivities不是数组或对象，并且您从 GraphQL 查询中获得正确的数据，您只需要更正解构和使用这些值的方式。 此外，由于您不能有冲突的变量名称，您将不得不从featuredActivities重命名变量

const PageTemplate = ({
    data: {
        islands: {
            id, title
            featuredActivities: { id: featuredId , title: featuredTitle },
        },
    },
    ...

    <article key={featuredId}>
      <h3>{featuredTitle}</h3>
    </article>