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

Question

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

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

我是这样称呼的

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

盖茨比-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>
})}

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

Category of Post created by Strapi cannot be retrieved by GraphQL of Gatsby.js. However, it is displayed in GraphiQL of Gatsby.js

reactjs

graphql

strapi

gatsby