Pass data into createPages API from gatsby-node.js

Question

I want to pass data in the form of variables into my react components when using gatsbyjs

I can generate pages at a different URL's but I want each one to have access to data outside of the GraphQL query. I am aware that context passed to GraphQL but I don't want to do this.

For example using this I can create a page called localhost/my-page using a react component. However inside the component I fetch data from another server using AJAX and I need to pass a search query to my props inside the create page.

How do I do this please?

const path = require('path');

exports.createPages = ({ boundActionCreators }) => {
const { createPage } = boundActionCreators

const component = path.resolve('src/pages/demo-photos.js')

const pages = [ 'one' ].map(name => ({
  id: `page-${name}`,
  path: `/${name}`,
  component,
  layout: `index`,
  context: {
      searchtag: `${name}`, // I WANT THIS AVAILABLE INSIDE MY REACT COMPONENT
  }
}))

pages.map(p => createPage(p))
}

Answer 1

The data you pass into the context property in gatsby-node.js is available via props.pageContext in the template component(the component you use to generate pages on-the-fly)