带有动态页面的GraphQL查询过滤器

我正在为我的所有类别创建动态页面。这些都是从GraphCM存储在我们的CMS中的，因此添加新的类别将生成一个新的类别按钮和一个页面

在动态生成的页面上，我想显示所有相关的文章和相关的类别

我使用GatsbyJS和GraphQL查询从GraphCMS获取数据

这是我的gatsby-node.js文件中的类别查询：

类别：所有图形类别{
节点{
标题
鼻涕虫
描述
身份证件
}
}

这就是我创建页面的方式。代码位于gatsby-node.js中：

data.categories.nodes.forEach（category=>{
创建页面({
组件：path.resolve（“./src/templates/category page.tsx”），
背景：{
类别
},
路径：`/articles/categories/${category.slug}`，
})
})

这是名为“category page.tsx”的类别页面的模板文件：

从“React”导入React
从“样式化组件”导入样式化
从“./components/styles/TextStyles”导入{H1，BodyMain}
导出默认函数CategoryPageTemplate（{pageContext:{category}}）{
返回(
{category.title}
{category.description}
)
}
const Wrapper=styled.div``
const HeaderWrapper=styled.div`
最小高度：250px；
显示：网格；
证明内容：中心；
对齐项目：居中；
填充：30px；
`
const TextWrapper=styled.div`
显示：网格；
网格间距：1rem；
文本对齐：居中；
`
常数TitleWrapper=样式化（H1）`
填充：0.2rem；
字号：900；
背景：-webkit线性梯度（左，#7230ce，#3E16BB）}；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
`
const DescriptionWrapper=styled（BodyMain）``

这是我对post的查询：

allGraphCmsPost（排序：{字段：日期，顺序：ASC}）{
边缘{
下一站：下一站{
鼻涕虫
标题
}
页面：节点{
身份证件
作者{
身份证件
名称
标题
}
内容{
标记节点{
childMdx{
身体
}
}
}
日期：格式化日期
节选
搜索引擎优化{
描述
形象{
网址
}
关键词
标题
}
鼻涕虫
标题
}
以前的职位：以前的职位{
鼻涕虫
标题
}
}
}

---

你能指引我正确的方向吗？我正在考虑启用过滤的GraphQL查询，但我不确定在页面必须是动态的情况下如何实现这一点。

您有两种选择。您可以通过修改

类别

节点添加相关帖子，也可以对类别进行两次单独的查询和筛选

关于数据结构的信息不足以提供修改GraphQL模式的可靠答案，因此我将重点介绍第二种方法

import React from "react"
import styled from "styled-components"
import { H1, BodyMain } from "../components/styles/TextStyles"

export default function CategoryPageTemplate({ pageContext: { category }, data }) {
    const filteredPosts = data.allMarkdownRemark.edges.filter(({ node }) =>{
       node.frontmatter.category == category.title
    });

  return (
    <Wrapper>
      <HeaderWrapper>
        <TextWrapper>
          <TitleWrapper>{category.title}</TitleWrapper>
          <DescriptionWrapper>{category.description}</DescriptionWrapper>
        </TextWrapper>
      </HeaderWrapper>
    </Wrapper>
  )
}
const Wrapper = styled.div``

   // omitted the styles to avoid a huge answer

export const pageQuery = graphql`
  query {
    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
      edges {
        node {
          id
          excerpt(pruneLength: 250)
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            slug
            category
            title
          }
        }
      }
    }
  }
`

从“React”导入React
从“样式化组件”导入样式化
从“./components/styles/TextStyles”导入{H1，BodyMain}
导出默认函数CategoryPageTemplate（{pageContext:{category}，data}）{
const filteredPosts=data.allmarkdownmark.edges.filter（{node}）=>{
node.frontmatter.category==category.title
});
返回(
{category.title}
{category.description}
)
}
const Wrapper=styled.div``
//省略了样式以避免一个巨大的答案
export const pageQuery=graphql`
质疑{
AllMarkdownMarkark（排序：{order:DESC，fields:[frontmatter\uuuuuuuuuu date]}）{
边缘{
节点{
身份证件
摘录（剪枝长度：250）
前沿物质{
日期（格式字符串：“MMMM DD，YYYY”）
鼻涕虫
类别
标题
}
}
}
}
}
`

注意：我假设了一个默认的降价数据结构，如果它与您的不匹配，请根据您的需要进行调整

---

我们的想法是创建一个新的查询来获取所有帖子，在那里，信息将由数据保存（从

props.data

中解构），然后用类别的标题过滤它们（假设帖子将有一个类别字段，它必须有一个）。

你的帖子共享一个类别吗？你能提供数据结构的任何示例以及如何创建页面吗？我现在已经更新了原始帖子。谢谢你让我意识到信息非常有限。谢谢。我会试着调整它，使之与我现有的相匹配。我已使用post查询再次更新了帖子：）