Are GatsbyJS GraphQL queries tied to the component where it's written?

Question

I have a couple yaml files with meta content that represent pages of a site that get ingested by Gatsby's data source/transform system - one of the files looks something like this:

path: /about/
pageTitle: About Us
metaDescription: Learn more about our team and what we do
...

I also have a base yaml file with meta content that other pages default to if meta content is missing or was not particularly written for that page.

path: Base
pageTitle: Welcome to our website
metaDescription: We are the leading company of industry x in ...
...

My current solution is to pass a graphql query variable $slug that is the page path, ie, /about/ via the onCreatePage hook in gatsby-node.js ,

exports.onCreatePage = ({ page, boundActionCreators }) => {
  const { createPage, deletePage } = boundActionCreators;
  return new Promise(resolve => {
    const oldPage = Object.assign({}, page);
    deletePage(oldPage);
    createPage({
      ...oldPage,
      context: {
        $slug: oldPage.path
      }
    });
    resolve();
  });
};

add a graphql query in layout/index.js filtering for Base meta content,

query BasePageQuery {
  pagesYaml(path: { eq: "Base" }) {
    path
    pageTitle
    metaDescription
    ...
  }
}

and a more generic graphql query on every single page where field path (from the yaml file) matches the query variable $slug :

query AboutPageQuery($slug: String) {
  pagesYaml(path: { eq: $slug }) {
    path
    pageTitle
    metaDescription
    ...
  }
}

Instead of adding a graphql query onto every single page, I'm thinking instead to add both queries into layout/index.js , and avoid having to manually add the above query to all other pages.

query BasePageQuery($slug: String) {
  base: pagesYaml(path: { eq: "Base" }) {
    path
    pageTitle
    metaDescription
    ...
  }
  page: pagesYaml(path: { eq: $slug }) {
    path
    pageTitle
    metaDescription
    ...
  }
}

However, it isn't working as expected - this.props.data in the layout component only returns the base content and completely ignores my second query. It appears as if the query is tied to my layout/index.js component, and the $slug variable isn't reflecting the page component that's being rendered.

Which brings me to my question(s) -

1. Are graphql queries tied to the component that it's being written in? In this particular case - is $slug always going to be whatever path layout/index.js is?

2. Is there a way to print out graphql variables, or somehow verify what the variable is at a given point in time?

3. Is there a better solution to what I'm trying to achieve?

Answer 1

1. I don't quite understand the question about where GraphQL queries are tied to but I think that it will be more clear to you when you understand that you passed slug as a variable to the createPage function in your gatsby-node.js file. So for every page that is being created when you run createPage , the slug variable will be whatever you passed to it.

2. Again, do that in your gatsby-node.js file, in the createPage function.

3. gatsby-config.js would be a more appropriate place for the "default" or "base" information you want. Check out the example gatsby-starter-blog . There are information in the gatsby-config.js that are then being queried in the blog-post.js template alongside with the post's data.