Запрос GraphQL для упорядочивания ссылок в соответствии с порядком в содержательном веб-приложении

Я экспериментирую с Contentful и Gatsby. Цель состоит в том, чтобы создать веб-сайт, на котором редакторы могут создавать целевые страницы из разделов. У меня есть тип содержимого, представляющий оболочку страницы. Этот тип контента имеет поле Разделы, тип которого - Ссылки (многие). С помощью этого поля я могу связать несколько типов контента. Эти связанные типы контента отображаются один под другим. Редактор может изменить их порядок перетаскиванием. См. Снимок экрана:

введите описание изображения здесь Однако этот порядок не отображается, когда я визуализирую эти типы контента. По умолчанию порядок основан на дате создания связанного содержимого. В игровой площадке 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, который упорядочивает связанные ссылки, как будто они появляются в содержимом оболочки родительской страницы? Это должно быть возможно, не так ли? Почему мы должны иметь возможность переупорядочивать ссылки с помощью перетаскивания в содержательном веб-приложении, если это не влияет ни на что на вашем визуализированном веб-сайте?


contentful gatsby graphql
person foxeyyy    schedule 10.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Моя проблема заключалась в том, что вместо запроса оболочки страницы я запрашивал все содержимое в типах содержимого раздела.

Правильный код:

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
person foxeyyy    schedule 10.08.2020
comment
Спасибо за ответ. :) Не возражаете, отметив вопрос как решенный? ???? - person stefan judis; 10.08.2020