在 GatsbyJS/GraphQL 中合并页面查询
combining page queries in GatsbyJS/GraphQL
如何在 GraphQL 中合并两个页面查询?我尝试简单地将我需要的数据合并到一个查询中,但它一直给我一个错误 "TypeError: Cannot read property 'pages' of undefined"。我的想法是,要么我的查询没有正确完成,要么没有在我的框中正确获取数据 a 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
}
}
}
}
}
Returns数据:
{
"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
.
此外,您的 GraphQL
查询 wpgraphl
returns 一个对象,其中 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>
)
}
如何在 GraphQL 中合并两个页面查询?我尝试简单地将我需要的数据合并到一个查询中,但它一直给我一个错误 "TypeError: Cannot read property 'pages' of undefined"。我的想法是,要么我的查询没有正确完成,要么没有在我的框中正确获取数据 a 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
}
}
}
}
}
Returns数据:
{
"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
.
此外,您的 GraphQL
查询 wpgraphl
returns 一个对象,其中 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>
)
}