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

Question

我想创建一个分类页面。我正在使用 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;

错误代码

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

/Users/t/WebDevelopment/xxxxxx/src/pages/categories/{xxxx.slug}.js 29:39 error Field "slug" is not defined by type "StrapiPostCategoriesFilterListInput" graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

failed Re-building development bundle - 0.177s ERROR in /Users/t/WebDevelopment/xxxx/src/pages/categories/{xxxxxx.slug}.js 29:39 error Field "slug" is not defined by type "StrapiPostCategoriesFilterListInput"

link 工作正常。

会显示的

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

这个不会显示。

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

Answer 1

你能试试在 graphql 中使用 where 而不是 filter

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

Answer 2

Field "slug" is not defined by type "StrapiPostCategoriesFilterListInput" graphql/template-strings

这是不言自明的。在您的情况下，slug 在 categories 下（FileSystem API 中的 collection/nested 路线）。

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

{xxxxx.categories.slug}.js

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

I want to create a category page. I am using Gatsby.js, GraphQL and Strapi

graphql

gatsby