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

Question

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

现在，我得到了一个像这样的简单页面，我在其中从 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 },
        },
    },

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

您可能需要：

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

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

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

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


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

这样，您可以在 ({title, id}) 中的同一循环内解构，因为您正在获取每个特定位置（featuredActivity，可迭代变量）、title 和 id（等等其余必填字段）。

Answer 2

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

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

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