[英]Are GatsbyJS GraphQL queries tied to the component where it's written?
[英]combining page queries in GatsbyJS/GraphQL
如何在 GraphQL 中合並兩個頁面查詢? 我嘗試簡單地將我需要的數據組合到一個查詢中,但它一直給我一個錯誤“TypeError:無法讀取未定義的屬性'頁面'”。 我的想法是,要么我的查詢沒有正確完成,要么沒有在我的 div 框中獲取正確的數據。
const IndexPage = (props) => {
const { indexImage, wpgraphql } = props.data
return (
<Layout>
<SEO title="Home" />
<BackgroundImage
className="masthead"
fadeIn
fluid={indexImage.childImageSharp.fluid}
>
<div className="black-overlay">
<div className="content-box">
<h1>Her skriver jeg en overskrift</h1>
<h2>This is my sub head</h2>
</div>
</div>
</BackgroundImage>
<div
style={{
margin: `0 auto`,
maxWidth: 1200,
padding: `0 1.0875rem 1.45rem`,
}}
>
<div class="wrapper">
<div class="box a">
{wpgraphql.pages.nodes[0].undersideACFgraphql.mainText}
</div>
<div class="box b">Her skriver jeg tekst 2 :D</div>
</div>
</div>
<Link to="/page-2/">Gå til en anden side</Link>
</Layout>
)
}
export default IndexPage
export const query = graphql`
query {
indexImage: file(relativePath: { eq: "bolig-partner-ydelser.jpg" }) {
childImageSharp {
fluid(maxWidth: 1800) {
...GatsbyImageSharpFluid
}
}
}
wpgraphql {
pages {
edges {
node {
undersideACFgraphql {
mainText
}
}
}
}
}
}
`;
在 GraphiQL 中運行我的 wpgraphql 查詢時,它工作得很好。 這是 wpgraphql 查詢:
query MyQuery {
wpgraphql {
pages(where: {id: 91}) {
nodes {
undersideACFgraphql {
mainText
}
}
}
}
}
返回數據:
{
"data": {
"wpgraphql": {
"pages": {
"nodes": [
{
"undersideACFgraphql": {
"mainText": "Her kan jeg skrive min tekst til mit lille grid :D:D"
}
}
]
}
}
}
}
您收到錯誤的原因是因為您訪問wpgraphql
不正確 - 您應該使用props.data.wpgraphql.pages
但您正在使用props.wpgraphql.pages
。
此外,您對wpgraphl
的GraphQL
查詢返回一個 object ,其中pages.edges
是一個數組,因此您必須獲取該數組中的第一個node.undersideACFgraphql.mainText
,如果那是您想要的,然后在它的屬性下訪問它。
const IndexPage = (props) => {
const { indexImage, wpgraphql } = props.data
return (
<Layout>
<SEO title="Home" />
<BackgroundImage
className="masthead"
fadeIn
fluid={indexImage.childImageSharp.fluid}
>
<div className="black-overlay">
<div className="content-box">
<h1>Her skriver jeg en overskrift</h1>
<h2>This is my sub head</h2>
</div>
</div>
</BackgroundImage>
<div
style={{
margin: `0 auto`,
maxWidth: 1200,
padding: `0 1.0875rem 1.45rem`,
}}
>
<div class="wrapper">
<div class="box a">
{wpgraphql.pages.edges[0].node.undersideACFgraphql.mainText}
</div>
<div class="box b">Her skriver jeg tekst 2 :D</div>
</div>
</div>
<Link to="/page-2/">Gå til en anden side</Link>
</Layout>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.