使用 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>