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

Posted 2023-03-08

【中文标题】使用 Gatsby/Contentful 从 Graphql 获取参考数据

【英文标题】：Getting reference data from Graphql using Gatsby/Contentful

【发布时间】：2021-07-01 22:38:50

【问题描述】：

我正在努力从我的 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]

【问题讨论】：

不工作是什么意思？你收到什么错误？

内容不显示。

FeaturedActivity 和 island 似乎都将是一个数组？

那么如何从 FeaturedActivities 获取数据？

【参考方案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（等等其余必填字段）。

【参考方案2】：

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

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

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

【讨论】：

嗯，谢谢您的回复。我想我已经尝试过让我快速检查一下

当我这样做时出现此错误：27:35 错误解析错误：参数名称冲突

你是否也在解构岛屿的 id 和 title？

是的，我想从岛屿和特色活动中解构标题

我已经更新了问题中的代码，以便您更好地了解我想要做什么