CODEWITHSUNDEEP
reactjsgraphqlgatsby
TurboTobias
TurboTobias

Reputation: 625

GatsbyJS: StatiscQuery pass in data from current page

I am trying to createPages programmatically in GatsbyJS. I have made a herotext component to my page template. The issue I am having is that static queries don't seem to support graphql variables. How can I get data from the page in my GraphQL query?

My GraphQL query:

query HeroById($id: String) {
          wpPage(id: { eq: $id }) {
            ACFundersider {
              hero {
                heroText
                heroHeading
              }
            }
            id
          }
        }

The variable id: { eq: $id }) that doesn't seem to take any effect at all. I have noticed there is a query to get currentPage but not quite sure if I can use that?

query MyQuery {
  wpPage(ACFundersider: {hero: {heroText: {}}}) {
    allWpPage {
      pageInfo {
        currentPage
      }
    }
  }
}

My component looks like this with StaticQuery:

import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default function HeroText() {
  return (
    <StaticQuery
      query={graphql`
        query HeroById($id: String) {
          wpPage(id: { eq: $id }) {
            ACFundersider {
              hero {
                heroText
                heroHeading
              }
            }
            id
          }
        }
      `}
      render={data => <h2>{data.wpPage.ACFundersider.hero.heroHeading}</h2>}
    />
  )
}

Upvotes: 0

Views: 418

Answers (2)

Ferran Buireu
Ferran Buireu

Reputation: 29335

staticQuery (or useStaticQuery hook) doesn't accept parameters (hence the name, static), as you can see in Gatsby docs. Your approach will never work.

To use your HeroById query, you need to use the context to pass the id to the page and use a page query rather than a static query. Your full code should look like:

import * as React from 'react'
import { graphql } from 'gatsby'

const SomeTemplate= ({data}) => {
  console.log("your data is", data);
  return (
    <div>
     Some content
    </div>
  )
}

export const query = graphql`
        query HeroById($id: String) {
          wpPage(id: { eq: $id }) {
            ACFundersider {
              hero {
                heroText
                heroHeading
              }
            }
            id
          }
        }
      `

export default SomeTemplate

Check the GraphQL query in the localhost:8000/___graphql playground to ensure that your HeroById query returns something when filtering by id (try hardcoding the id if you can).

Upvotes: 1

patrick
patrick

Reputation: 353

Can you access your query through nodes or edges? If you're using nodes you can try to do something like this:

import React from "react"
import { StaticQuery, graphql } from "gatsby"

const query = graphql`
        query HeroById($id: String) {
          wpPage(id: { eq: $id }) {
            ACFundersider {
              hero {
                heroText
                heroHeading
              }
            }
            id
          }
         }
`

export default function HeroText() {
    const data = useStaticQuery(query)
    const { wpPage: { nodes: pages }, } = data
    return (
        <div>
            {
                pages.map(page => {
                    return (
                        <h2>page.ACFundersider.hero.heroHeading</h2>
                    )
                })
            }
        </div>
)}

Not sure if this exact code works for you (you might want to tweak it a bit).

Upvotes: 0

Related Questions