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

Question

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

Answer 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,
}