如何使用 Gatsby Graphql 在组件中使用变量

Question

我在 Wordpress 中使用 gatsby，我有一个组件应该根据变量类别加载一些帖子，我的想法是能够在几个地方使用该组件，但我一直无法找到方法。

这是组件

import * as React from "react"
import { useStaticQuery, graphql, Link } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import './styles/bloque1.css';

const Bloque1 = ({Titulo, PostID}) => {
  const data = useStaticQuery(graphql`
   query {
     allWpPost(
       limit: 3
       filter: {categories: {nodes: {elemMatch: {databaseId: {eq: ${PostID} }}}}}
     ) {
       nodes {
         title
         slug
         date
         featuredImage {
          node {
            sourceUrl
            localFile {
              childImageSharp {
                gatsbyImageData
              }
            }
          }
        }
       }
     }
   }
   `)

  return (
    <div className="ct-blq-1">
      <h2>{Titulo}</h2>
      {data.allWpPost.nodes.map(element => 
      <div className="container-img">
        <GatsbyImage image={getImage(element.featuredImage.node.localFile)} alt=""  className="img"/>
        <div className="blq-1-item">
          <Link to="https://www.valoraanalitik.com/2022/04/12/j-p-morgan-rebajo-recomendacion-adr-bancolombia/"
            rel="bookmark" title={element.title}>
            <div className="nota-titulo">
              <h3>{element.title}</h3>
            </div>
            <div className="nota-tiempo">
              <time>{element.date}</time>
            </div>
          </Link>
        </div>
      </div>)}
    </div>
  )
}

export default Bloque1

我正在寻找一种在 {databaseId: {eq: ${PostID} }}

中使用 PostID 的方法

const Page = () => (
    <section id="page">
        <main>

            <Bloque1 Titulo="Noticias Destacadas" PostID="2"/>

            <Bloque2 />
        </main>
    </section>
)

Answer 1

您不能在静态查询中使用动态变量（因此得名）。这是一个 known limitation:

useStaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages

Because of how queries currently work in Gatsby, we support only a single instance of useStaticQuery in a file

也就是说，根据您要实现的目标，您可以使用 page query or using a template。要在页面查询中使用变量，您需要使用上下文提供它们，而不是像您在生成页面时尝试的那样通过 props 提供。如果您不使用 gatsby-node.js 生成页面，您始终可以获取所有帖子 (allWpPost) 并使用 JavaScript 和提供的 postID.

过滤它们

缺少很多实现细节以提供完整的代码段，但您可以根据本教程调整 WordPress 结构：https://www.gatsbyjs.com/docs/creating-and-modifying-pages/

如何使用 Gatsby Graphql 在组件中使用变量

How to use variables in components with Gatsby Graphql

reactjs

graphql

gatsby