我想创建一个类别页面。我正在使用 Gatsby.js、GraphQL 和 Strapi答案

【问题标题】：I want to create a category page. I am using Gatsby.js, GraphQL and Strapi我想创建一个类别页面。我正在使用 Gatsby.js、GraphQL 和 Strapi
【发布时间】：2022-01-19 13:52:12
【问题描述】：

我想创建一个类别页面。我正在使用 Gatsby.js、GraphQL 和 Strapi。可能过滤器不起作用。但是不知道怎么解决。

{strapiCategory.slug}.js

import * as React from "react";
import { graphql } from "gatsby";
import { Helmet } from "react-helmet";
import Layout from "../../components/Layout";
import PostList from "../../components/PostList";
import *as styles from "./{MicrocmsCategory.slug}.module.css";
const CategoryPage = (props) => {
  const categories = props.data.strapiCategory;
  const posts = props.data.allStrapiPost.nodes;
  return (
    <Layout>
      <Helmet>
        <title>{categories.name}</title>
        <meta name="description" content={categories.name} />
      </Helmet>
     <p className={styles.categoryName}> {categories.name}</p>
      <PostList posts={posts} />
    </Layout>
  );
};

export const query = graphql`
query ($slug: String!){
  strapiCategory (slug: { eq: $slug }){
    name
    slug
    
  }
    allStrapiPost(filter:{categories:{slug:{ eq: $slug }}}){
      nodes {
        slug
        title
        content
        thumbnail
        published_at(formatString: "YYYY.MM.DD hh:mm")
        categories {
          slug
          name
        }
      }
    }
  }
`;

export default CategoryPage;

错误代码

错误 #98123 网页包

生成开发 JavaScript 包失败

/Users/t/WebDevelopment/xxxxxx/src/pages/categories/{xxxx.slug}.js 29:39 错误字段“slug”未按类型定义 “StrapiPostCategoriesFilterListInput”graphql/模板字符串

✖ 1 个问题（1 个错误，0 个警告）

重新构建开发包失败 - 0.177s 错误 /Users/t/WebDevelopment/xxxx/src/pages/categories/{xxxxxx.slug}.js 29:39 错误字段“slug”未按类型定义 "StrapiPostCategoriesFilterListInput"

链接正常。

它会显示出来。

  const categories = props.data.strapiCategory;
        <title>{categories.name}</title>.

这不会显示。

const posts = props.data.allStrapiPost.nodes;
 <PostList posts={posts} />

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

字段“slug”未按类型定义 “StrapiPostCategoriesFilterListInput”graphql/模板字符串

这是不言自明的。在您的情况下，slug 在categories 下（FileSystem API 中的集合/嵌套路由）。

你的{xxxxx.slug}.js 应该变成：

{xxxxx.categories.slug}.js

【讨论】：

谢谢。我把它改成了 {Strapi.categories}.js。但是，当我单击一个类别时，我会得到一个 404 页面。我认为这可能是过滤器的问题。但我没有解决办法。如果你能继续支持我，我会很高兴。
我将文件命名为与查询相同。 {strapiCategory.slug}.js 然后我就可以显示分类页面了。然而，波斯特并没有出现。我在 PostCell 中编写了以下代码，这是一个用于创建内容的组件。我写了以下代码。 /categories/${category.slug}} className={styles.link}>
那么，现在正在创建页面，但链接不起作用？
链接工作正常。我已经添加了文本。
但这是一个全新的（旧）问题。 Gatsby 总是查询id，而您使用的是slug (gatsbyjs.com/docs/reference/routing/file-system-route-api)。您不能使用文件系统路由 API 执行此查询。你应该使用传统的gatsby-node.js

【解决方案2】：

你可以尝试在graphql中使用where而不是filter

allStrapiPost(where:{categories:{slug:{ eq: $slug }}}){

【讨论】：