Build Gatsby Page Slugs Dynamically from Markdown with gatsby-node.js

I don't think the second resolve() call added at 03:35, to line 33, makes sense. The promise was already resolve()d on line 9, and the code around line 33 is already running in a .then() block chained from that promise.

You don't have to create new Promise, because the graphql function itself returns a Promise. You could just write like:

return graphql(`....`).then(result => {...});

const path = require('path') Why are we using require?

Why is blogPostTemplate a component? When I hover over it I get const blogPostTemplate: string?

There are a number of errors in the code snippets in the transcript:

1. The graphql node string is not closed

exports.createPages = (({graphql, actions}) => {
  const { createPages } = actions

  return new Promise((resolve, reject)) => {
    const blogPostTamplate = path.resolve('src/templates/blogPost.js') 
    
  })
})```
Instead of ```
const path = require('path')

exports.createPages = (({graphql, actions}) => {
  const { createPage } = actions

  return new Promise((resolve, reject)) => {
    const blogPostTemplate = path.resolve('src/templates/blogPost.js') 
    
  })
})```

const path = require('path') Why are we using require?

Because this gatsby-node.js will be executed by nodeJs runtime.

I found another question: Why we require src/templates/blogPosts.js in gatsby-node.js.

Since these two js file use different module system.

• src/templates/blogPosts.js: es module, and (should be) compiled into build.js something like that.
• gatsby-node.js will be executed during the runtime.

Just don't get it, how can they work together ?

I had a few problems with the code on this page (gatsby was throwing a 404 error for my blog posts and I wasn't able to know why..). Anyway... reading the following page from the gatsby docs really helped me: https://www.gatsbyjs.org/docs/adding-markdown-pages/

I don't think the second resolve() call added at 03:35, to line 33, makes sense. The promise was already resolve()d on line 9, and the code around line 33 is already running in a .then() block chained from that promise.

This is correct. You just need to return after mapping over the edges. do not try to resolve inside of the map function that will not work.

Just to flag this again - the code shown in both the transcript and the screencast doesn't work & needs to be fixed.

As others have noted, there's no need to instantiate a new promise at all. The graphql call returns a promise, so we can just return that directly.

const path = require('path')

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const blogPostTemplate = path.resolve('src/templates/post.js')
  return graphql(
    `
      query {
        allMarkdownRemark {
          edges {
            node {
              frontmatter {
                path
              }
            }
          }
        }
      }
    `
  ).then(result => {
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      const { path } = node.frontmatter
      return createPage({
        path,
        component: blogPostTemplate,
        context: {
          pathSlug: path,
        },
      })
    })
  })
}

Is it possible to fetch *.tsx files in gatsby-node.js ? :)

Hey Marcell - make sure you the lasted Gatsby version. Gatsby natively supports JavaScript and TypeScript, you can change files from .js to .tsx at any point to start adding types and gaining the benefits of a type system. If you need more information, check out this document outline Typescript support.