What am I misunderstanding in gatsby-node when trying to build a template page for categories or tags?

Trying to learn Gatsby I'm confused what I'm doing wrong when it comes to building a paginated page for a category. If a post has a category created from the frontmatter of:

---
date: '2017-08-10'
title: 'Sweet Pandas Eating Sweets'
slug: 'sweet-pandas-eating-sweets'
description: 'Something different to post'
category: ['sweet', 'yep', 'two']
tags: ['3', '2']
---

in my gatsby-node.js I dont have any issues (or thrown issues I should say) with single post generation but the console reads:

Failed to load resource: the server responded with a status of 404 (Not Found)

when the category is clicked but not when the <Link> is clicked to go to the single post, the file:

exports.createPages = async ({ actions, graphql }) => {
  const { data } = await graphql(`
    query {
      allMdx(sort: { fields: frontmatter___date, order: DESC }) {
        edges {
          node {
            id
            frontmatter {
              title
              slug
              tags
              category
              date
            }
          }
        }
      }
    }
  `)

  if (data.errors) {
    console.error(data.errors)
    throw data.errors
  }

  // const tagSet = new Set()
  // const categorySet = new Set()

  data.allMdx.edges.map(edge => {
    const slug = edge.node.frontmatter.slug
    const id = edge.node.id
    actions.createPage({
      path: slug,
      component: require.resolve(`./src/templates/singlePost.js`),
      context: { id },
    })
  })

  const postPerPage = 3
  const numPages = Math.ceil(data.allMdx.edges.length / postPerPage)
  Array.from({ length: numPages }).forEach((_, i) => {
    actions.createPage({
      path: i === 0 ? `/` : `/${i + 1}`,
      component: require.resolve(`./src/templates/category.js`),
      context: {
        limit: postPerPage,
        skip: i * postPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

and in templates/category.js:

import React from 'react'
import { graphql } from 'gatsby'

// Components
import Layout from '../components/Layout'

const category = ({ location, pageContext, data }) => {
  const { currentPage, numPages } = pageContext
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? '/' : `/${currentPage - 1}`
  const nextPage = `/${currentPage + 1}`
  const posts = data.allMdx.edges

  console.log('data', data)
  return (
    <>
      <Layout>categories</Layout>
    </>
  )
}

export const pageQuery = graphql`
  query CategoryQuery($id: String!, $skip: Int!, $limit: Int!) {
    allMdx(
      sort: { fields: frontmatter___date, order: DESC }
      skip: $skip
      limit: $limit
      filter: { frontmatter: { category: { eq: $id } } }
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            category
            date
            description
            slug
          }
        }
      }
    }
  }
`

export default category

In GraphiQL both my queries work, example with filtering for just a category:

{
"id":"two"
}

query:

query CategoryQuery($id: String!) {
  allMdx(
    sort: {fields: frontmatter___date, order: DESC}
    filter: {frontmatter: {category: {eq: $id}}}
  ) {
    edges {
      node {
        id
        frontmatter {
          title
          category
          date
          description
          slug
        }
      }
    }
  }
}

Research:

• Creating Tags Pages for Blog Posts
• How to paginate a list of posts belonging to a specific category in GatsbyJS
• Wordpress + Gatsby: List all posts for each categories?
• gatsby-advanced-starter

Why when I click on a category from a post if I add it up in the header it goes to a 404 Page and indicates there is no page yet for /category?

Edit:

Stripped down sandbox of what's going on and the issue:

Tried changing the node from the id to the slug and the result is the same:

  tagsQuery.data.allMdx.edges.forEach(edge => {
    const slug = edge.node.frontmatter.slug
    actions.createPage({
      path: `category/${slug}`,
      component: require.resolve(`./src/templates/Category.js`),
      context: { slug },
    })
  })

from the 404 page, under pages it shows:

/category/undefined
/404/
/
/404.html
/post-slug
/post-slug