What am I doing wrong in gatsby-node?

[soVader]

New to Gatsby I've ran into an issue trying to get categories to work when under a post or as a header link. I'm testing all my queries in GraphiQL but for some reason any time I click on a category wether for the post or at the header it directs me to a 404. Whole issue originated when trying to build a category's page that included pagination. For example, category foo when clicked would use the category template and get all posts for the category foo with pagination if the count was greater than the passed number (which will eventually be an .env variable but is hard coded at the index.js).

gatsby-node:

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

  const tagsQuery = await graphql(`
    query {
      allMdx(sort: { fields: frontmatter___date, order: DESC }) {
        edges {
          node {
            id
            frontmatter {
              tags
              category
            }
          }
        }
      }
    }
  `)

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

  postsQuery.data.allMdx.edges.forEach(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 = 8
  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,
      },
    })
  })*/
}

templates/category.js:

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

// Components
import Layout from "../components/Layout"

const Category = ({ 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}`

  console.log("data", data)
  return (
    <>
      <Layout>categories {(isFirst, isLast, prevPage, nextPage)}</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

Here is the Codesandbox:

and the SO question:

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

I'm stumped on this and have spent days on it reading threw S) posts, docs, and here and even with re-writing and throwing any possible idea at it doesnt seem to work but my noob skills are not there. Any help to get this to work? What am I missing in the connection between the actual link for the category and gatsby-node that makes it go to a 404?