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

Question

我使用盖茨比与Wordpress，我有一个组件，应该根据一个变量类别加载一些帖子，这个想法是能够在几个地方使用该组件，但我还没能找到这样做的方法。

这是组件

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}}}中的postd

const Page = () => (
<section id="page">
<main>
<Bloque1 Titulo="Noticias Destacadas" PostID="2"/>
<Bloque2 />
</main>
</section>
)

Answer 1

不能在静态查询中使用动态变量(因此得名)。这是一个已知的限制:

• useStaticQuery不接受变量(因此名称为"static")，但可以在任何组件中使用，包括页面
• 由于Gatsby当前的查询工作方式，我们只支持在一个文件
中包含一个useStaticQuery实例

也就是说，根据您想要实现的目标，您可以使用页面查询或使用模板。要在页面查询中使用变量，您需要使用上下文提供它们，而不是通过props，因为您在生成页面时试图这样做。如果您不使用gatsby-node.js生成页面，您可以始终获取所有帖子(allWpPost)并使用JavaScript与提供的postID过滤它们。

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