按日期订购具有不同内容类型的Contentful

亚伦·里昂

这是我使用GatsbyJS和Contentful的第一个项目。现在,我在网站上有几篇帖子介绍了不同的内容模型。为了简单起见,假设我有一些“内容”类型是“照片”,而另一些是“视频嵌入”。我正在使用GraphQL来获取帖子...

我对每种类型都有不同的组件。

照片(也称为PhotoSection)

const data = useStaticQuery(graphql`
    query {
      allContentfulImage(sort: { fields: date, order: DESC }) {
        edges {
          node {
            image {
              description
              file {
                url
              }
            }
          }
        }
      }
    }
  `)

视频嵌入(也称为电影部分)

const data = useStaticQuery(graphql`
    query {
      allContentfulVideoEmbeds(sort: { fields: date, order: DESC }) {
        edges {
          node {
            embedURL
          }
        }
      }
    }
  `)

然后,我在名为Blog的另一个组件中编译所有组件

const Blog = () => {
  return (
    <div>
      <AudioSection />
      <FilmSection />
      <PhotoSection />
    </div>
  )
}

export default Blog

最终产品是帖子按日期降序排列,但它们也按其部分/内容类型进行组织。如果遵循代码块,则顺序为AudioSection-> FilmSection-> PhotoSection。我希望它们按日期(最新的顺序)排序,而不管内容类型如何。

希望这是有道理的。不确定在这里做什么?

先感谢您

编辑... 这是后尝试的建议。我删去了一些较大的部分,但以PhotoComponent为例

const BlogTwo = () => {
  const data = useStaticQuery(graphql`
    query {
      music: { bla bla bla }
      videos: { bla bla bla }
      images: allContentfulImage(sort: { fields: date, order: DESC }) {
        nodes {
          type: __typename
          image {
            description
            file {
              url
            }
          }
        }
      }
  `)

  const dataForDisplay = [data.music, data.images, data.videos].sort(
    (a, b) => b.date - a.date
  )

  const componentTypeMap = {
    ContentfulMusicAndArt: MusicComponent,
    ContentfulImage: PhotoComponent,
    ContentfulVideoEmbeds: FilmComponent,
  }

  const MusicComponent = () => {
    return (
      <div>
        bla bla bla
      </div>
    )
  }

  const PhotoComponent = () => {
    return (
      <div className={`${blogStyles.blogDiv}`}>
        <div className={`${blogStyles.blogPost} ${blogStyles.image}`}>
          <img
            src={data.images.nodes.image.file.url}
            alt={data.images.nodes.image.description}
          />
        </div>
      </div>
    )
  }

  const FilmComponent = () => {
    return (
      <div>
        bla bla bla
      </div>
    )
  }

  return (
    <div>
      {dataForDisplay.map(({ type, props }) =>
        React.createElement(componentTypeMap[type], props)
      )}
    </div>
  )
}
export default BlogTwo

科里沃德

无需将每种内容类型包装在一个WhateverSection组件中,而是将所有三个内容数组组合为一个数组,对其进行排序,然后遍历组合数组,为每个条目呈现相关组件。

为了使它更合理,我将通过将静态查询提升到Blog组件中,将它们组合在一起并添加GraphQL别名来使您的数据使用起来更加冗长,从而重构您对静态查询的使用。

const Blog = () => {
  const data = useStaticQuery(graphql`
    query {
      images: allContentfulImage(sort: { fields: date, order: DESC }) {
        nodes {
          type: __typename
          date
          image {
            description
            file {
              url
            }
          }
        }
      }

      videos: allContentfulVideoEmbeds(sort: { fields: date, order: DESC }) {
        nodes {
          type: __typename
          date
          embedURL
        }
      }
    }
  `)

  const dataForDisplay = [...data.images.nodes, ...data.videos.nodes].sort((a, b) => b.date - a.date)

  return (
    <div>
      {dataForDisplay.map(({ type, ...props }) => 
        React.createElement(componentTypeMap[type], props)
      )}
    </div>
  )
}

export default Blog

const componentTypeMap = {
  ContentfulImage: PhotoComponent,
  ContentfulVideoEmbed: FilmComponent,
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ArrayList <T>具有不同的T类型

来自分类Dev

umbraco Razor-按日期(仅日期)订购日期

来自分类Dev

按日期订购唯一帐户

来自分类Dev

在熊猫数据框的列中按具有不同标识符的重复日期时间索引进行聚合

来自分类Dev

具有复合日期类型的调用约定

来自分类Dev

ASP.Net WebAPI在不同的用户代理中具有不同的内容类型

来自分类Dev

具有不同返回类型的函数重载

来自分类Dev

实施具有不同关联类型的协议

来自分类Dev

当文件在bash中具有不同的前缀时,如何按文件名中的日期排序?

来自分类Dev

如何查询按日期分组的具有不同列值的行

来自分类Dev

具有不同类型的通用接口

来自分类Dev

查找每一行的日期范围。LEAD / LAG,但具有不同的类型/动作

来自分类Dev

如何使用3种具有不同数据类型的日期组件获取日期

来自分类Dev

订购具有各种数据类型的委托

来自分类Dev

订购日期按sqlite降序

来自分类Dev

在熊猫数据框的列中按具有不同标识符的重复日期时间索引进行聚合

来自分类Dev

Rails按日期有条件订购任务

来自分类Dev

通过日期戳从文件中订购内容

来自分类Dev

如何按今天的日期订购2列

来自分类Dev

按角度加载的重复div可能具有不同的内容,如何使它们具有自动调整的高度?

来自分类Dev

不同类型的用户重定向到具有不同内容的同一页面(index.php)

来自分类Dev

按字母顺序订购商品(与世界不同)

来自分类Dev

按周期天数订购日期/小组任务

来自分类Dev

在具有不同计数的Excel数据透视表中按星期对日期进行分组

来自分类Dev

下载具有特定内容类型的文件

来自分类Dev

加快按日期订购

来自分类Dev

打开具有不同内容的 modalbox

来自分类Dev

Bitbucket REST Api:如何使用rest api调用按日期desc订购所有分支?

来自分类Dev

SQL 从 2 个相同的表(具有不同的数据)中获取按人员分组的最大日期

Related 相关文章

  1. 1

    ArrayList <T>具有不同的T类型

  2. 2

    umbraco Razor-按日期(仅日期)订购日期

  3. 3

    按日期订购唯一帐户

  4. 4

    在熊猫数据框的列中按具有不同标识符的重复日期时间索引进行聚合

  5. 5

    具有复合日期类型的调用约定

  6. 6

    ASP.Net WebAPI在不同的用户代理中具有不同的内容类型

  7. 7

    具有不同返回类型的函数重载

  8. 8

    实施具有不同关联类型的协议

  9. 9

    当文件在bash中具有不同的前缀时,如何按文件名中的日期排序?

  10. 10

    如何查询按日期分组的具有不同列值的行

  11. 11

    具有不同类型的通用接口

  12. 12

    查找每一行的日期范围。LEAD / LAG,但具有不同的类型/动作

  13. 13

    如何使用3种具有不同数据类型的日期组件获取日期

  14. 14

    订购具有各种数据类型的委托

  15. 15

    订购日期按sqlite降序

  16. 16

    在熊猫数据框的列中按具有不同标识符的重复日期时间索引进行聚合

  17. 17

    Rails按日期有条件订购任务

  18. 18

    通过日期戳从文件中订购内容

  19. 19

    如何按今天的日期订购2列

  20. 20

    按角度加载的重复div可能具有不同的内容,如何使它们具有自动调整的高度?

  21. 21

    不同类型的用户重定向到具有不同内容的同一页面(index.php)

  22. 22

    按字母顺序订购商品(与世界不同)

  23. 23

    按周期天数订购日期/小组任务

  24. 24

    在具有不同计数的Excel数据透视表中按星期对日期进行分组

  25. 25

    下载具有特定内容类型的文件

  26. 26

    加快按日期订购

  27. 27

    打开具有不同内容的 modalbox

  28. 28

    Bitbucket REST Api:如何使用rest api调用按日期desc订购所有分支?

  29. 29

    SQL 从 2 个相同的表(具有不同的数据)中获取按人员分组的最大日期

热门标签

归档