Gatsby.js 的 GraphQL 无法检索 Strapi 创建的帖子类别。但是，它显示在 Gatsby.js 的 GraphiQL 中

Question

Gatsby.js 的 GraphQL 无法检索 Strapi 创建的帖子类别。 但是，它显示在 Gatsby.js 的 GraphiQL 中。

我可以调用并显示除类别之外的所有内容。

我这样称呼它。

{categories.name}、{category.slug} 我买不到这些。

gatsby-config.js

     {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL:`http://localhost:1337`,
        collectionTypes: [`post`,`category`],
      },
    },

index.js

    const IndexPage = (props) => {
  const posts = props.data.allStrapiPost.nodes;
  return (
    <Layout>
      <Helmet>
        <title>title</title>
        <meta
          name="description"
          content="xxxxxxx"
        />
      </Helmet>
      <div className={styles.container}>
 
      <PostList posts={posts}  />
      
      </div>


    </Layout>
  );
};

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

export default IndexPage;

PostList.js

import React from "react"
import PostCell from "./PostCell";
import * as styles from "./PostList.module.css"

const PostList = props => {
  return (
    <>
      {props.posts.map(post => {
        return (
          <div className={styles.container}>
        <PostCell post={post} key={post.slug}  />
        </div>
        )

      })}
    </>
  )
}

export default PostList

PostCell.js

    import React from "react";
import { Link } from "gatsby";
import * as styles from "./PostCell.module.css";
import {Row,Col,Card,Button,container,OverlayTrigger} from 'react-bootstrap'


const PostCell = (props) => {
  const { title, content, categories, published_at, slug, thumbnail } = props.post;
  const plainContent = (content || "").replace(/(<([^>]+)>)/gi, "");
  return (


      <Card className={styles.container} >
            <Link to={`/posts/${slug}` } className={styles.link}>

          <Card.Img className="m-0" variant="top" src={thumbnail} alt={title} style={{width:`351px`,height:`160px`}}></Card.Img>
          <Card.Body  className={styles.cardContents} >
<Card.Title  variant="light" className={styles.cardTitle}>     {title}
</Card.Title>

<div className={styles.footer}>

<Link to={`/category/${categories.slug}`} >
<Button className="categoryButton" variant='primary' style={{padding:`5px`,fontSize:`10px`}}>{categories.name}</Button>
</Link>
<Card.Footer >{published_at}</Card.Footer>
</div>

        </Card.Body>
        </Link>

      </Card>
      

    

    

    
  );
};

export default PostCell;

strapi 角色已设置。

Answer 1

如果您能够在 GraphiQL 中看到类别而不显示它们，则您的问题在于视图以及您如何处理数据。在这种情况下，（在典型版本之后），categories 是一个数组，就像posts 一样，所以除非你循环遍历它们，否则你将无法显示它们。

执行以下操作：

    import React from "react";
import { Link } from "gatsby";
import * as styles from "./PostCell.module.css";
import {Row,Col,Card,Button,container,OverlayTrigger} from 'react-bootstrap'


const PostCell = (props) => {
  const { title, content, categories, published_at, slug, thumbnail } = props.post;
  const plainContent = (content || "").replace(/(<([^>]+)>)/gi, "");
  return (


      <Card className={styles.container} >
            <Link to={`/posts/${slug}` } className={styles.link}>

          <Card.Img className="m-0" variant="top" src={thumbnail} alt={title} style={{width:`351px`,height:`160px`}}></Card.Img>
          <Card.Body  className={styles.cardContents} >
<Card.Title  variant="light" className={styles.cardTitle}>     {title}
</Card.Title>

<div className={styles.footer}>

<Link to={`/category/${categories.slug}`} >
{categories.map(category=>{
   return <Button className="categoryButton" variant='primary' style={{padding:`5px`,fontSize:`10px`}}>{category.name}</Button>
})}
</Link>
<Card.Footer >{published_at}</Card.Footer>
</div>

        </Card.Body>
        </Link>

      </Card>

关键部分是：

{categories.map(category=>{
   return <Button className="categoryButton" variant='primary' style={{padding:`5px`,fontSize:`10px`}}>{category.name}</Button>
})}