Gatsby: Multiple graphql queries works in __graphql but not on the site

[ThiagoMiranda]

Hi,

I´ve added a query in my current working query on the layout/index.js:
( Old that works returning data.navMenu)

    navMenu: allSitePage(
      sort: { fields: [context___slug], order: ASC }
      filter: { context: { menuSection:{ ne: null} }}) {
      edges {
        node {
          path
          context {
            slug
            lang
            title
            menuSection
            icon
          }
        }
      }
    }

New that won´t work returning data: {} but it works on /__graphql

    currentPage: sitePage(context: { slug: { eq: $slug} }) {
      context {
        lang
      }
    } 
    navMenu: allSitePage(
      sort: { fields: [context___slug], order: ASC }
      filter: { context: { menuSection:{ ne: null} }}) {
      edges {
        node {
          path
          context {
            slug
            lang
            title
            menuSection
            icon
          }
        }
      }
    }

How can I make this work? Even if the currentPage isn´t working, shouldn´t I been able to see the navMenu object like the first one?

Thanks

[pieh]

It seems that you are using $slug variable which is probably not available for layout queries.

Does this not produce any error in console output?

[ThiagoMiranda]

@pieh actually the $slug variable is the "desired" goal. So the context isn´t available on the layout, right? Even so when I hardcoded the path ( replacing $slug to one of my paths ) it returned the same thing.
Again.. If I use it on /___graphql it works.

Thanks

[ThiagoMiranda]

@pieh another question: Can I access some of the context on the Layout? Or at least something regarding my current page?

[pieh]

Layout is higher in hierarchy than page, so you would need to make query like that in your page component and pass it over to layout (which is currently problematic without using some kind of "app state managment").

Other option is to not use gatsby layouts and create generic layout component (just not in src/layouts directory) and wrap your page components with it:

return (
  <Layout currentPage={this.props.currentPage} navMenu={this.props.navMenu}>
    { // your page content }
  </Layout>
)

(you would have to duplicate your navMenu query in all page/template queries - but you could define graphql fragment for that)

Gatsby v2 will remove gatsby specific layout constructs, so if You would like to upgrade you will have to do something like this eventually. It will also add ability to run static queries (without parameters/variables) to non-page components so then you would just move navMenu query back to your layout component.

[ThiagoMiranda]

Thanks @pieh