reactjs - 按日期订购 Contentful 中具有不同内容类型的帖子

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
          }
        }
      }
    }
  `)

然后我在另一个名为 的组件中编译所有组件。博客

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