Gatsbyjs 静态查询不会加载答案

【问题标题】：Gatsbyjs static query wont loadGatsbyjs 静态查询不会加载
【发布时间】：2021-04-13 23:59:53
【问题描述】：

我遇到了一个问题，我使用 StaticQuery 创建了一个非页面组件，该组件通过这样的设置提取信息。

const BestSellers = () => (
  <div>
    <StaticQuery
      query={bestSellerQuery}
      render={data => (
        <div>
          {data.allMarkdownRemark.edges.map(({ node }) => (
            <Card className="m-2 index-card" key={node.id}>
              <Link to={node.fields.slug}>
                <GatsbyImage
                  className="card-img-top"
                  image={node.frontmatter.image}
                  alt={node.frontmatter.description}
                />
              </Link>
              <hr />
              <CardBody>
                <Link to={node.fields.slug}>
                  <CardTitle className="h4 text-light text-wrap">
                    {node.frontmatter.title}
                  </CardTitle>
                </Link>
                <CardSubtitle>{node.frontmatter.description}</CardSubtitle>
                {/* <CardSubtitle>{node.excerpt}</CardSubtitle>   */}
                <CardSubtitle className="float-left mt-5">
                  Price: ${node.frontmatter.price}
                </CardSubtitle>
                <CardSubtitle>
                  <Badge color="danger float-right mt-5">
                    {node.frontmatter.tag}
                  </Badge>
                </CardSubtitle>
              </CardBody>
            </Card>
          ))}
        </div>
      )}
    />
  </div>
);

const bestSellerQuery = graphql`
  query bestSellerQuery {
    allMarkdownRemark(
      filter: { frontmatter: { tag: { eq: "popular" }}}
      sort: { fields: [frontmatter___date], order: DESC }
      limit: 2
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            description
            price
            tag
            image {
              childImageSharp {
                gatsbyImageData(
                  layout: CONSTRAINED
                  height: 600
                  placeholder: BLURRED
                  formats: [AUTO, JPG]
                  transformOptions: { fit: COVER, cropFocus: ATTENTION }
                )
              }
            }
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

export default BestSellers;

我正在做的是，一旦单击 Markdown 文件，我的页面就会以编程方式创建，所以我试图将其导入到我用来创建页面的模板中，它只显示加载（静态查询）我尝试在有和没有页面查询的页面中使用相同的查询，结果与在我尝试使用它的模板组件中使用它的结果相同。

【问题讨论】：

查询是否在localhost:8000/___graphql 中工作？你能打印像{data.allMarkdownRemark.edges.map(({ node }) => { console.log("node", node); return <Card className="m-2 index-card" key={node.id}>这样的循环结果吗？
嗯，这条评论让我开始分解事情，找出问题所在，这导致我解决了这个问题，所以谢谢。

标签： graphql gatsby

【解决方案1】：

这是 graphql 查询中的问题，更具体地使用了这一行过滤器：{frontmatter：{标签：{eq：“流行”}}} 问题是 MD 文件中的“流行”是大写的，所以通过将其更改为“流行”来解决它....

【讨论】：