gatsby - How do you pass variables to pageQuery

Question

I have this page in Gatsby:

import React from 'react'
import Link from 'gatsby-link'

import IntroPartial from '../partials/themes/intro'

export default class ThemeTemplate extends React.Component {
  render(){
    const theme = this.props.pathContext.theme
    console.dir(this.data)
    return (
      <div>
        <h1>{theme.name}</h1>
        <IntroPartial theme={theme} />
      </div>
    )
  }
}

export const pageQuery = graphql`
query ThemeQuery($theme: String){
  allMarkdownRemark(
    filter: { frontmatter: { themes: { in: [$theme] } } }
  ){
    edges{
      node{
        frontmatter{
          title
          themes
        }
        html
      }
    }
  }
}
`

This query works fine in the GraphQL tester assuming I supply an option to $theme. How do I provide the value for $theme? I'd like to set it to this.props.pathContext.theme.slug.

The docs seem to imply that some variables should just work, but I'm not sure how to add my own.

Answer 1

The variables passed into graphql are coming from createPage. It's normally called in your gatsby-node file. You'll often see path used, as $path, in examples as it is required.

In order to include your own, additional variables to pass into the graphql call, you'll need to add them to context. Modifying the example from the docs a bit:

createPage({
  path: `/my-sweet-new-page/`,
  component: path.resolve(`./src/templates/my-sweet-new-page.js`),
  // The context is passed as props to the component as well
  // as into the component's GraphQL query.
  context: {
   theme: `name of your theme`,
 },
})

You can then use $theme in the query as you have in your example. Setting $theme in the above code would be done in the createPages portion (see the example), as you'll then have access to all of the data.