Question

我正在尝试Contentful和Gatsby。目的是创建一个网站，编辑者可以在其中创建各部分的着陆页。我有一个表示页面包装器的内容类型。此内容类型具有字段“ Sections”，其类型为References（许多）。通过此字段，我可以链接多种内容类型。此链接的内容类型一个在另一个的下面。编辑器可以通过拖放对其重新排序。参见屏幕截图：

但是，当我渲染这些内容类型时，此顺序不可见。默认情况下，顺序基于链接内容的创建日期。 graphql游乐场中有一些排序选项，但是它们都不反映我在页面包装程序中的实际拖动顺序。这是我的graphql查询，以及用于映射和呈现这些部分的代码

import ...
const Sections = () => {
const data = useStaticQuery( 
    graphql`
        query Sections {
            allContentfulSection {
                edges {
                    node {
                        id
                        title
                        heroImage {
                            fluid(maxWidth: 750) {
                                ...GatsbyContentfulFluid
                            }
                        }
                    }
                }
            }
        }
    `
)

return (

    <div className="sections">
        {data.allContentfulSection.edges.map(edge => {
            return (
                <div className="section" key={edge.node.id}>
                    {edge.node.heroImage && (
                        <Img
                            className="featured"
                            fluid={edge.node.heroImage.fluid}
                            alt={edge.node.title}
                        />
                    )}
                    <h2>
                        {edge.node.title}
                    </h2>
                </div>
            )
        })}
    </div>

   )
 }

export default Sections

有人可以告诉我一个graphql查询，该查询对链接的引用进行排序，就像它们出现在父页面包装内容中一样吗？这应该可能吧？如果这对您呈现的网站上的任何内容都没有影响，为什么我们要通过拖放在内容丰富的Web应用程序中重新排序引用呢？

Answer 1

我的问题是，我没有查询页面包装器，而是查询“节”内容类型中的所有内容。

正确的代码是：

import...
const Sections = () => {
const data = useStaticQuery( 
    graphql`
        query MyQuery {
              contentfulPagesMedium(title: {eq: "Frontpage"}) {
                sectionss {
                  id
                  title
                        heroImage {
                            fluid(maxWidth: 750) {
                                ...GatsbyContentfulFluid
                            }   
                        }
                }
              }
            }
    `
    )

return (

    <div className="sections">
        {data.contentfulPagesMedium.sectionss.map(section => {
            return (
                <div className="section" key={section.id}>
                    {section.heroImage && (
                        <Img
                            className="featured"
                            fluid={section.heroImage.fluid}
                            alt={section.title}
                        />
                    )}
                    <h2>
                        {section.title}
                    </h2>
                </div>
            )
        })}
    </div>

   )
}

export default Sections

GraphQL查询以根据内容丰富的Web应用程序中的顺序对引用进行排序

1 个答案: