CODEWITHSUNDEEP
reactjsgatsby
Helmut Granda
Helmut Granda

Reputation: 4665

Gatsby createPage actions vs {page.slug}.js

What is the main difference between creating static pages with createPage in Gatsby vs using {page.slug}.js. I was not able to find any documentation about this so I am not sure what to search for other than the documents encouraging the use of {page.slug}.js format.

Upvotes: 1

Views: 417

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

Short answer: there's no difference at all between using gatsby-node.js and File System Route API ({page.slug}.js), they are different ways of achieving the same result: dynamic routes.

TL;DR

The File System Route API adds the simplicity that in most cases you lack using gatsby-node.js way of creating dynamic pages. For simple use-cases, I'd say that it's better to use the File System Route API but, because of some known limitations, for some complex scenarios, it's better to use gatsby-node.js (and maybe it's the only way).

The Filesystem Route API always filters by id as you can see in the docs:

allProduct {
  nodes {
    id # Gatsby always queries for id
    fields {
      sku
    }
  }
}

It may work in your scenario but if you need more complex filtering, the File System Route API may not be suitable.

For example, if you are writing a blog, you may think that the File System Route API works for you and it could be. But if at some point you want to filter the page creation some posts based on a complex and custom value (i.e: the typical isFuture field that checks if the date of the post is past or present and it's created customizing the GraphQL schema), you will find the "limitations" of the File System Route API.

In the end, it's all based on choosing what fill fit you better.

Summarizing (a lot)...

File System Route API

  • Simplicity: you get rid of gatsby-node.js and the code related
  • Limitations:
    • Always queries for the id
    • Can't pass custom properties to the view/template
    • Potential troubles by creating dynamic path segments based on a previously queried result
  • Path creation is a little bit complex for the same properties (i.e: slug): in this case, you will need to define a gatsbyPath for each property (docs)

gatsby-node.js

  • "Complexity": you always have a gatsby-node.js file with all the queries
  • Easy to manipulate the page creation (createPage) and to drill down any object or variable using the pageContext which gives you a lot of flexibility.
  • Path creation based on any desired value is easy to achieve.

Upvotes: 2

Related Questions