How to Create Dynamic Routing in Gatsby?

Creating Dynamic Routing for your blog posts will significantly facilitate the work and accelerate the publication of your material. You no longer need to write some fields in each post manually. They will be generated programmatically.

This article will show you how to create dynamic routing in Gatsby.

Complete guide on how to create Dynamic Routing in Gatsby.

Let's assume we have the following content files structure:

Copy
blog
  posts
    my-first-post
      index.mdx
    my-second-post
      index.mdx
  guides
    my-first-guide
      index.mdx
    my-second-guide
      index.mdx

For each post, we want to generate dynamically:

• The slug field equals the post folder name: /my-first-post/, /my-first-guide/
• The type field equals the name of the parent folder: guides, posts. Using the type field, you can easily filter posts by folder name.

1. Add the gatsby-source-filesystem plugin to the gatsby-config.js.

First, you must be sure you have already installed the gatsby-source-filesystem plugin. If you haven`t already done so, here are the steps you need to follow.

1. Install the plugin: npm install gatsby-source-filesystem
2. Add the following configuration to the gatsby-config.js:

Copy
module.exports = {
  plugins: [
    …other plugins,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/blog/posts`,
      },
      __key: 'posts',
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'guides',
        path: `${__dirname}/blog/guides`,
      },
      __key: 'guides',
    },
  ],
};

2. Add dynamic fields slug and type to the gatsby-node.js.

To make dynamic fields, we have to use the onCreateNode extension point from the Gatsby Node API and extend the gatsby-node.js config with the following configuration:

Copy
const { createFilePath } = require(`gatsby-source-filesystem`);

exports.onCreateNode = async ({ actions, getNode, node }) => {
  const { createNodeField } = actions;

  if (node.internal.type === 'Mdx') {
    const value = createFilePath({ node, getNode });
    createNodeField({
      name: 'slug',
      node,
      value,
    });

    const parent = getNode(node.parent);
    const parentName = parent.sourceInstanceName;
    createNodeField({
      name: 'type',
      node,
      value: parentName,
    });
  }
};

Let's break these lines of code down:

• Call the onCreateNode function from the Gatsby Node API to create new nodes.
• For each mdx file, create a node URL from a file's path on the filesystem using the createFilePath method.
• Create a new field slug using the createNodeField method.
• Get the parent of the current node.
• Get the parent node name.
• Create a new field type by passing the field name, node, and parent node name.

Now, newly created nodes are added to the Fields object.

To get them from GraphQL, you need to update the query.

Copy
graphql`
  query {
    allMdx(limit: 1000, sort: { frontmatter: { date: DESC } }) {
      nodes {
        fields {
          slug
          type
        }
        frontmatter {
          title
        }
      }
    }
  }
`;

3. Run the gatsby build command and restart the application.

And that's it! Now you have dynamically generated fields slug and type.

Conclusion

Implementing dynamic routing in Gatsby for your blog posts brings numerous benefits, such as automating the generation of fields like slug and type. This not only simplifies your workflow but also accelerates the publishing process.

We hope this article was helpful to you! Thanks for reading!