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

Question

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

在动态生成的页面上，我想显示所有相关帖子以及相关类别。

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

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

categories: allGraphCmsCategory {
          nodes {
            title
            slug
            description
            id
          }
        }

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

data.categories.nodes.forEach(category => {
    createPage({
      component: path.resolve("./src/templates/category-page.tsx"),
      context: {
        category,
      },
      path: `/articles/categories/${category.slug}`,
    })
  })

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

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

export default function CategoryPageTemplate({ pageContext: { category } }) {
  return (
    <Wrapper>
      <HeaderWrapper>
        <TextWrapper>
          <TitleWrapper>{category.title}</TitleWrapper>
          <DescriptionWrapper>{category.description}</DescriptionWrapper>
        </TextWrapper>
      </HeaderWrapper>
    </Wrapper>
  )
}
const Wrapper = styled.div``

const HeaderWrapper = styled.div`
  min-height: 250px;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 30px;
`

const TextWrapper = styled.div`
  display: grid;
  grid-gap: 1rem;
  text-align: center;
`

const TitleWrapper = styled(H1)`
  padding: 0.2rem;
  font-weight: 900;
  background: -webkit-linear-gradient(left, #7230ce, #3E16BB)};
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`

const DescriptionWrapper = styled(BodyMain)``

这是我对帖子的查询：

allGraphCmsPost(sort: { fields: date, order: ASC }) {
          edges {
            nextPost: next {
              slug
              title
            }
            page: node {
              id
              author {
                id
                name
                title
              }
              content {
                markdownNode {
                  childMdx {
                    body
                  }
                }
              }
              date: formattedDate
              excerpt
              seo {
                description
                image {
                  url
                }
                keywords
                title
              }
              slug
              title
            }
            previousPost: previous {
              slug
              title
            }
          }
        }

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

Answer 1

你有两个选择。您可以修改category 节点以添加customizing the Graphql schema 的相关帖子，也可以进行两个单独的查询并过滤类别。

没有足够的数据结构信息来提供修改 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
          }
        }
      }
    }
  }
`

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

这个想法是创建一个新的查询来获取所有帖子，信息将由数据保存（从props.data解构），然后使用类别的标题过滤它们（假设帖子将有一个类别字段，它必须有一个）。