按日期对不同内容类型的内容排序帖子

Posted 2023-03-08

【中文标题】按日期对不同内容类型的内容排序帖子

【英文标题】：Ordering posts in Contentful by date with different Content types

【发布时间】：2021-03-01 04:46:00

【问题描述】：

这是我第一个使用 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

【参考方案1】：

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

为了使这一点更明智，我将重构您对静态查询的使用，将它们提升到博客组件中，将它们组合起来，并添加 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,

【讨论】：

非常感谢，我想我就差不多了。但是，我从控制台收到一条错误消息 -> 错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。有什么想法吗？

您的数组中可能有一个不在componentTypeMap 中的组件类型。如果是这种情况，我通常会进行快速检查并将警告记录到控制台，以便我在开发中看到它，但不会在生产中破坏页面。

我编辑了我的初始帖子以显示我添加的内容（删除了大部分内容，但留下了照片组件作为示例）。我认为数组是正确实现的 b/c 我检查了控制台，它显示组件都在那里

@AaronLyons 我认为问题在于我在创建合并类型数组时忘记扩展 nodes (dataForDisplay)。我已经更新了我的代码以反映这一点。

哈哈哈哇，我没有意识到你想让我在数组中包含省略号。我认为这只是你的说法等等。刚刚了解了传播运算符是什么。谢谢一堆伙计:)