combining page queries in GatsbyJS/GraphQL

Question

How can I combine two page queries in GraphQL? I tried simply just combining the data I need into a single query but it keeps giving me an error "TypeError: Cannot read property 'pages' of undefined". My thought was that either my query is simply just not done right or not fetching the data correct in my box 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
              }
            }
          }
        }
      }
  }
`;

When running my wpgraphql query in GraphiQL it works just fine. Here is the wpgraphql query:

query MyQuery {
  wpgraphql {
    pages(where: {id: 91}) {
      nodes {
        undersideACFgraphql {
          mainText
        }
      }
    }
  }
}

Returns data:

{
  "data": {
    "wpgraphql": {
      "pages": {
        "nodes": [
          {
            "undersideACFgraphql": {
              "mainText": "Her kan jeg skrive min tekst til mit lille grid :D:D"
            }
          }
        ]
      }
    }
  }
}

goto · Accepted Answer · 2020-05-21T11:03:34.137

0

The reason why you're getting the error is because you're accessing wpgraphql incorrectly - you should be using props.data.wpgraphql.pages but you're doing props.wpgraphql.pages.

Also, your GraphQL query for wpgraphl returns an object where pages.edges is an array, so you have to grab the first object in that array, if that's what you want, and then access it's node.undersideACFgraphql.mainText property.

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>
  )
}

edited May 21 '20 at 11:03

answered May 21 '20 at 10:38

goto

4,336
15
20

I gave it a try and updated code in question. I might be misunderstanding your answer since now it breaks my whole layout and completely fails to compile. – TurboTobias May 21 '20 at 10:47
@TurboTobias not sure I follow, what do you get when you `console.log(props.data)`? – goto May 21 '20 at 10:48
console.log(props.data) return an object with indeximage and wpgraphql. Screenshot: https://share.getcloudapp.com/9ZuEnL7r – TurboTobias May 21 '20 at 11:01
I've tried updated code but returns TypeError: Cannot read property '0' of undefined. I've updated question with how my code looks now. – TurboTobias May 21 '20 at 11:04
@TurboTobias see the edit, wasn't sure how exactly what you were getting but the screenshot makes it clear. – goto May 21 '20 at 11:05
That did solve the problem! Thank you so much. I guess I wouldn't be needing the where: filter since it will grap the first object in the array or am I misunderstanding? – TurboTobias May 21 '20 at 11:09
@TurboTobias you can certainly use the `filter` but you still will be getting an array so either way, but with just a single object, and you'd have to access it by using an index. – goto May 21 '20 at 11:15

combining page queries in GatsbyJS/GraphQL

1 Answers1