Gatsby: How can I add a right context to createPage Gatsby?

[Nadjakoroleva]

How can I add a right context to createPage Gatsby?

Summary

Title is undefined while opening in a new window and during deploy.

Relevant information

I make a website for online courses. I have a page with a button, which refer to the Preorder page.

<Link to={`/preorder/${slug}`} state={{ title: `${title}`}} className={styles.button}>
   Buy a course 
</Link>

Everything works fine if I click first at the course card, then at the Buy button. I mean I have at Preorder page a title from previous link and url like http://localhost:8000/preorder/currentSlug.

 const Preorder = ({ location }) => { return (
<>
  <NoSSR>
     <h4 className={styles.title}>{location.state.title}</h4>
  </NoSSR>
<> )}; 

But the problem starts when I open a link preorder/currentSlug in a new window, I have a title as undefined. The same problem I have with deploy.

TypeError: Cannot read property 'title' of undefined

I thought it could be a problem with a server-side rendering and state / location, so I made a NoSSR component. It doesnt help. I suppose that the problem is with a context in a createPage method.

Do you have any ideas what am I doing wrong?

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js:

const path = require(`path`);
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;

  const coursePost = path.resolve(`./src/templates/course.js`);
  const preorder = path.resolve(`./src/templates/preorder/index.js`);
  return graphql(`
    {
      allContentfulCourse {
        edges {
          node {
            title
            tutor
            job
            slug
            video
            level
            topic
            tutorial
            priceOld
            priceNew
            includes
            skills
            details
            audience
            requirements
            deadline
            desc {
              desc
            }
            feedback {
              name
              role
              text
              photo
            }
            scheme {
              svg
              desc
              title
            }
            program {
              title
              text
            }
            team {
              job
              photo
              role
              desc
              name
            }
            logo {
              description
              file {
                url
              }
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      throw result.errors;
    }

    const courses = result.data.allContentfulCourse.edges;

    courses.forEach(course => {
      createPage({
        path: course.node.slug,
        component: coursePost,
        context: {
          slug: course.node.slug
        }
      });
    });

    courses.forEach(course => {
      createPage({
        path: `preorder/${course.node.slug}`,
        component: preorder,
        context: {
          title: course.node.title
        }
      });
    });
  });
};

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[universse]

For the Preorder page, you can try props.pageContext.title instead of props.location.state.title.

Also, state = {{ title: title }} isn't necessary. Guess you can safely remove that. You are getting error cuz location.state.title is only available when you click < Link /> with state passed in. When you open in a new window, location.state is undefined.

[Nadjakoroleva]

Oh yeah thank you! It works!