CODEWITHSUNDEEP
gatsby
Charles Chan
Charles Chan

Reputation: 83

Gatsby Lifecycle API question relating to Create Node and Create Page

I am trying to learn Gatsby by writing a plugin using the lifecycle API. I am using the Gatsby default starter and I put in my local plugin's gatsby-node.js some debug statements. Here's the output of gatsby build:

- creating node: [Site] children: []
- creating node: [Directory] children: []
- creating page: [/404/] json name [404-22d]
- creating page: [/] json name [index]
- creating page: [/page-2/] json name [page-2-fbc]
- creating node: [SitePage] path: [/404/] children: []
- creating node: [SitePage] path: [/] children: []
- creating node: [SitePage] path: [/page-2/] children: []
- creating page: [/404.html] json name [404-html-516]
- creating node: [SitePage] path: [/404.html] children: []

Here's my gatsby-node.js in my local plugin:


function onCreateNode({node, loadNodeContent}) {
  let message = `- creating node: [${node.internal.type}]`;
  if (node.path) {
    message += ` path: [${node.path}]`;
  }
  if (node.children) {
    message += " children: " + JSON.stringify(node.children);
  }
  if (node.owner) {
    message += ` owner: [${node.internal.owner}]`;
  }
  console.log(message);
}

function onCreatePage({page, actions}) {
  let message = `- creating page: [${page.path}] json name [${page.jsonName}]`;
  console.log(message);
}

exports.onCreateNode = onCreateNode;
exports.onCreatePage = onCreatePage;

I don't understand the followings:

  1. Why are there two create page calls for 404, one for /404/ and the other for /404.html?
  2. It appears in the debug statements that create page is called before create node (see above where creating page precedes creating node). Why is that? Shouldn't it be the other way around? (maybe the callbacks are done in a different order?)
  3. Ultimately, I don't fully understand the relationship between a node and a page. Is there a relationship?

Thanks in advance.

Upvotes: 1

Views: 707

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

1. Why are there two create page calls for 404, one for /404/ and the other for /404.html?

By default all gatsby generated pages, except for index, is put in a folder with a index.html file in it, i.e my-domain.com/page1 will have a page1 folder with index.html in it. Why? I'm guessing that if someone turns off javascript they'd still get the nice url (my-domain.com/page1/ instead of my-domain.com/page1.html.

The reason why 404 is copied from 404/ to 404.html is because

many static site hosts expect site 404 pages to be named this. — source

2. It appears in the debug statements that create page is called before create node. Why is that?

This has tripped me off a few times too & I'm still not too sure why. The createPages api is definitely called after sourceNodes, so here's my guess: onCreateNode & onCreatePage are triggered asynchronously; however, gatsby will call these hooks of each individual plugin serially. Perhaps by the time it's your turn (your gatsby-node.js hooks will be called last), gatsby has already moved on to the next steps (again, just speculation).

Also, keep in mind that when createPage is run, gatsby doesn't actually write out the page with data, it just keeps track of the page's metadata stuff.

Here's some helpful resouces:

3. Is there a relationship (between a node and a page)?

Not really. The user are the one who creates relationship between node and page by writing graphql queries that request data for a page.

By default, gatsby includes this plugin for all site, which turns files in src/pages/ into pages. User'd still have to query the data for those pages themselves.

So except for the node created for each pages by the internal plugin data bridge, there's no relationship between node & page.

Upvotes: 3

Related Questions