在 GatsbyJS/GraphQL 中组合页面查询
Posted
技术标签:
【中文标题】在 GatsbyJS/GraphQL 中组合页面查询【英文标题】:combining page queries in GatsbyJS/GraphQL 【发布时间】:2020-09-07 20:35:12 【问题描述】:如何在 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"
]
【问题讨论】:
【参考方案1】:您收到错误的原因是您错误地访问了wpgraphql
- 您应该使用props.data.wpgraphql.pages
,但您正在使用props.wpgraphql.pages
。
另外,您对wpgraphl
的GraphQL
查询返回一个对象,其中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>
)
【讨论】:
我试了一下并更新了有问题的代码。我可能会误解您的回答,因为现在它破坏了我的整个布局并且完全无法编译。 @TurboTobias 不确定我是否关注,当你console.log(props.data)
时你会得到什么?
console.log(props.data) 返回一个带有 indeximage 和 wpgraphql 的对象。截图:share.getcloudapp.com/9ZuEnL7r
我已尝试更新代码,但返回 TypeError:无法读取未定义的属性“0”。我已经更新了我的代码现在看起来如何的问题。
@TurboTobias 看到编辑,不确定你得到了什么,但屏幕截图很清楚。以上是关于在 GatsbyJS/GraphQL 中组合页面查询的主要内容,如果未能解决你的问题,请参考以下文章
已解决 - GatsbyJS - GraphQL ACF 查询问题
2017-6-2 Linq 高级查询 (分页和组合查)集合取交集