Variables/arguments aren't working with my graphql query - What am I doing wrong?

Question

Background: I'm using gatsby to set up a site and I would like to also utilize the gatsby-helmet plugin in order to inject header data to each page. The helmet component would load dynamic data based on what page is being rendered. I'm setting up the data inside the gatsby-config.js file within the parent object siteMetadata.

The config file looks like this:

module.exports = {
    plugins: [`gatsby-plugin-react-helmet`],
    siteMetadata: {
        pages: [
            {
                id: "home",
                title: "the page title",
                description: "the page description",
            },
        ],
    },
};

I'm very new to graphql. I'm using the graphql IDE in order to generate the query but I'm getting stuck at how to filter in order to only fetch the pages object with a specific id. I've read the documentation about variables/arguments but i'm obviously missing something because I only get errors. At this point I don't know whether it's my data that is set up incorrectly, or something I'm missing with graphql, or both.

At any rate, I could really use some help. So that I don't waste your time, if the following was my base query, how would I set this up in order to filter the results by page id using a variable/argument?

Thank you!

query MyQuery {
  site {
    siteMetadata {
      pages {
        id
        description
        title
      }
    }
  }
}

Answer 1

site filters will find any site node that matches the filters. It isn't intended to filter the subfields of the node like you are trying to.

That said, you can filter your GraphQL siteMetadata results using JavaScript:

const pages = data.site.siteMetadata.pages;

pages.filter(pageItem => /* whatever filter you need */);

More details: https://github.com/gatsbyjs/gatsby/issues/13989

You can add this "feature" on your own using schema customization APIs.