Is there any way to create dynamic slugs with Gatsby using a template component / page?

Question

I am quite new to Gatsby and I'm wondering if I can create custom routes (slugs) as templates. The use case would be:

1. Access /articles/name-of-the-article route
2. Serve component Article.js populated with the information retrieved from an API (i.e Strapi headless CMS) using the name-of-the-article slug.

Answer 1

After some investigations, I found out that there is a much easier way to do so by using gatsby-plugin-create-client-paths. All you need to do is install it with yarn or npm and then in gatsby-config.js you'll add these:

{
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/articles/*`] },
},

This means that every request slug like this: /articles/the-slug will request the articles.js page and using Link that provided by Gatsby, you can pass props through state prop like this:

<Link to="/articles/the-slug" state={{ slug: "the-slug", ...etc }}>Anchor Text</Link>

In this way, src/pages/articles.js becomes the template page for slugs prefixed with /articles.