Gatsby: Programatically created Pages do not trigger onCreatePage

[mbergeronupgrade]

Description

When creating pages programatically in gatsby-node.js they do not trigger the onCreatePage function. See log below

Steps to reproduce

Call the createPage function within the exports.createPages function in gatsby-node.js

Expected result

The exports.onCreatePage handler is called.

Actual result

I put a console log in before the createPage function and another console log in the exports.onCreatePage. Notice how the only calls to onCreatePage logged are for pages within the pages folder and not the programatically created ones.

success createLayouts — 0.015 s
⠁ CREATING PAGE:  blog-post
CREATING PAGE:  blog-post
CREATING PAGE:  blog-post
CREATING PAGE:  press-release
CREATING PAGE:  blog-post
CREATING PAGE:  blog-post
CREATING PAGE:  blog-post
success createPages — 0.053 s
⠁ ON PAGE CREATED /dev-404-page/
ON PAGE CREATED /404/
ON PAGE CREATED /blog/
ON PAGE CREATED /
ON PAGE CREATED /press/
ON PAGE CREATED /404.html

Environment

• Gatsby version (1.9.253):
• Node.js version: 8.11.1
• Operating System: OSX

[KyleAMathews]

Hmm not sure how this would happen — this is where we're invoking the calls https://github.com/gatsbyjs/gatsby/blob/57f7b0d372a7461f019ce86a9003371d45204f3b/packages/gatsby/src/redux/plugin-runner.js#L11

[m-allanson]

@mbergeronupgrade did you have any luck solving this?

[troip]

@mbergeronupgrade I am experiencing the same issue. Have you found any solution?

Environment

• Gatsby 1.9.247
• Node 8.9.4

[tizzle]

@mbergeronupgrade @KyleAMathews,

i ran into the same issue today. I made some experiments with interesting results:

I moved some of my createPages code into a local plugin and defined a onCreatePage handler in the plugin as well. Again, the console logs in this handler were not called.

I then moved that onCreatePage handler to my projects gatsby-node.js.

This gave the following output in terminal:

⠁ CREATING PAGE /en/shop
CREATING PAGE /de/shop
ON CREATE PAGE /en/shop
ON CREATE PAGE /de/shop
success createPages — 0.021 s
⠁ CREATING PAGE /de/blog
CREATING PAGE /de
CREATING PAGE /en/blog
CREATING PAGE /en
ON CREATE PAGE /dev-404-page/
ON CREATE PAGE /404/
ON CREATE PAGE /admin/
...

Mind the success createPages — 0.021 s followed by some more CREATING PAGES logs. It seems the createPages in the plugin makes the build step finish early.

The /lang/shop pages are created in the plugin.
The /lang and /lang/blog pages are created in gatsby-node.js of the project.
The rest is created automatically from the pages directory.

As a sidenote i have to mention that in the createPages i am fetching some graphql asynchronously, but i doubt this is causing problems.

I hope this helps narrowing down the problem, or at least as a temporary workaround.

[mbergeronupgrade]

I ended up solving this by having the function needed for the page creation in both the create page and on create page functions in order to capture both dynamically created pages and the pages from the pages folder.

I'm using https://github.com/AustinGreen/gatsby-starter-netlify-cms

I'll have some more time to put on the project next week I'll try to debug this to understand what is going on.

[mpartipilo]

I found this issue today. I was quite surprised that it didn't work. I went with @mbergeronupgrade's approach for now.

[Chuloo]

Here's a reproduction of the bug. repro-5255

Simply clone the repository, run npm install then gatsby build

[pieh]

Thanks @Chuloo for reproduction!

So here's my findings why this is happening:
https://github.com/gatsbyjs/gatsby/blob/d213693ef90f07c8a1b4e43db427327499b429ba/packages/gatsby/src/utils/api-runner-node.js#L167-L178

Because only plugin name is being tracked and not what API hook createPage was called in - it will skip calling onCreatePage in the same gatsby-node.js file.

Potential solutions:

• track both plugin name and originating api hook, or
• don't emit CREATE_PAGE action if page didn't change (which should prevent infinite loop) and remove code I linked above

[KyleAMathews]

Ohhh yeah. I remember adding that. Yeah, checking if the page has changed before calling onCreateNode is a much better solution. That's what we do for new nodes as well.

[ckreiling]

Just ran into the same problem and stumbled upon this issue. Any fix in the foreseeable future? I'm loving using Gatsby, but this puts a hitch in designing my application! Thanks.

[KyleAMathews]

@ckreiling would you be interested in exploring one of @pieh's fixes? Here's the instructions for setting up a local dev environment! https://www.gatsbyjs.org/docs/how-to-contribute/#contributing-to-the-repo

[ckreiling]

@KyleAMathews I'm very interested in doing that! It'd be my first open source contribution I've ever done though. Are there any centralized docs that I can look at to get a feel for how Gatsby is tested, and any other internal big-picture core Gatsby concepts?

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[williamtstanley]

I just ran into this issue today. I have duplicated my function call in both onCreatePage and createPages to handle it for now.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[jocrau]

I followed the popular https://auth0.com/blog/securing-gatsby-with-auth0/ to implement auth. It utilizes onCreatePage to create client-only route. Because of this issue it didn't secure my programmatically created pages.

[jonniebigodes]

@jocrau if you can please make a reproduction following these steps so that it can be looked at in more detail.

I've just finished running the steps documented in the document you've posted and all seems to be working as it should. The pages are created programmatically and for instance when i hit /acount/ when i'm logged in it shows the correct information, otherwise redirects me to the login.
Also see if the authentication example can help you in any way.

[stuckj]

Just ran into this today as well. Given that it's 2 years old now I'm assuming this just won't be fixed. :-P Guess I'll use the workaround.

[mhedengren]

Just ran into this today as well. Given that it's 2 years old now I'm assuming this just won't be fixed. :-P Guess I'll use the workaround.

May I ask you how you did that? I'm not sure what I must do.

[stuckj]

Anywhere you run createPage just run onCreatePage manually as well. You can pass the required parameters from what was passed to createPage. To simplify things I just made a wrapper function (I called it ourCreatePage to make it obvious it's a wrapper) that calls through to createPage from gatsby and then calls onCreatePage and I use ourCreatePage everywhere we would normally use gatsby's createPage.

[nerdess]

@stuckj can you post your ourCreatePage wrapper? I got it to work but would like to learn from your solution as it might be more elegant than my hack.

[stuckj]

Sure, there's not much to it. Here it is with the big warning comment linking this issue and all. :)

  // Wrap createPage to assure onCreatePage is called since it's currently not for programmatically created pages in
  // gatsby-node.js. It only works for plugin created pages and pages in the `/pages` folder. See this issue for details:
  // https://github.com/gatsbyjs/gatsby/issues/5255
  // NOTE: If that issue is ever fixed we'll want to remove this code else onCreatePages will be called twice.
  const ourCreatePage = ({ ...params }) => {
    createPage(params)
    const { path, component, context } = params
    onCreatePage({
      page: { path, component, context },
      actions: { deletePage, createPage }
    })
  }

NOTE: deletePage and createPage here are from the actions from the createPages callback that you implement in gatsby-node.js to create pages. Our looks like this...

export const createPages = async ({
  graphql,
  actions: { createPage, deletePage }
}) => {
...

And the ourCreatePage definition is the first thing in there.