How to define "node type" in Gatsby?

Question

In Gatsby tutorial part 6, you can find multiple mentions of "node type" :

According to the API, you need to decide on two things before creating a collection route:

• Which type of node to create pages from.
• Which field from that node type to use in the URL.

To create a new collection route, you name your file {nodeType.field}.js, where nodeType is the type of node you want to create pages from, and field is the data field from that node type that you want to use in the URL for that page.

My aim would be to create a page tree like :

• index.tsx
• blog/{article.slug}.tsx
• projects/{project.slug}.tsx
• tags/{tag.id}.tsx

All of articles, projects and tags would be MDX files but queried on specific location, or frontmatter prop.

But I don't know how to create named node type that I should use like mdx in {mdx.slug}.js.

I even tried to add an instance of gatsby-source-filesystem with a name to use as type but it didn't work :

plugins: [
  // ...
  {
    resolve: "gatsby-source-filesystem",
    options: {
      path: `${__dirname}/_data`,
      name: "instances",
      __key: 'instances'
    }
  },
  "gatsby-plugin-mdx"
}

Answer 1

According to the docs:

gatsby-plugin-mdx automatically adds a slug field to each MDX node, which contains a string of the filename for the .mdx file (with the .mdx extension removed). You can see the slug field’s value for each MDX node in GraphiQL. If you run the following query:

So you just need to use gatsby-plugin-mdx to create an slug based on the filename:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts/`,
      },
    },
    {
      resolve: "gatsby-plugin-page-creator",
      options: {
        path: `${__dirname}/src/posts`,
      },
    },
    `gatsby-plugin-mdx`,
  ],
}

Note: gatsby-plugin-page-creator may be required depending on your desired folder structure/source

Once you've set properly your folder structure, your slug field will be available (because the node will be inferred from the plugins and accessible by GraphQL) so you will be able to create pages using the Filesystem Route API like blog/{article.slug}.tsx.

Applied to your code this means that you only need to use /pages/blog/{mdx.slug}.js.

According to what you said, you will need to create several instances of gatsby-source-filesystem to create multiple sources.

Since your index.tsx won't be dynamically created, you can just directly create it under /pages folder.

Answer 2

I think you actually call the filename {mdx.slug}.js as in src/pages/{mdx.slug}.js. It IS a way to tell gatsy that this file will be used for dynamic mdx.slug.