Gatsby + Contentful URL Structure Problems

[meierpatrick]

I'm having trouble setting up the proper URL structure using Gatsby + Contentful.

My folder structure looks like this:

├── src
├── pages
├──── Learn (folder)
│    ├── index.js (contentful learn-template queries all pages)
│    ├── guides (folder)
├────└────
├─────────├── index.js (contentful guide-template queries all guides)

I'm using gatsby-node.js to query my contentful pages with createPages :

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions
    const result = await graphql(`
  query GetContent {
page: allContentfulPages(filter: {node_locale: {eq: "en-US"}}) {
    nodes {
      slug
    }
  }
guides: allContentfulGuides(filter: {node_locale: {eq: "en-US"}}) {
    nodes {
      slug
    }
  }
}
  `)

    result.data.page.nodes.forEach(page => {
        createPage({
            path: `${page.slug}`,
            component: path.resolve(`src/pages/guides/index.js`),
            context: {
                slug: page.slug
            },
        })
    })

    result.data.guides.nodes.forEach(guides => {
        createPage({
            path: `${guides.slug}`,
            component: path.resolve(`src/pages/guides/index.js`),
            context: {
                slug: guides.slug
            },
        })
    })
}

The problem that I'm having is that the URL looks like that:

http://localhost:8000/learn/{contenfulGuides}/

But I want to achieve this:

http://localhost:8000/{contentfulPages}/{contentfulGuides}/

I've looked everywhere but haven't found topics about this.

I want to know how to remove the folder name in the URL and instead paste the contentful page slug.

Hope someone can help sending me in the right direction.