Why the collection route values are different?

I'm using the gatsby-transformer-json plugin to query some JSON files, the data structure is as follows:

src
├── data
│   ├── channels
│   │   └── UC7Lhhngb9lLW6tuPddEM62A.json
│   │   ...
│   └── videos
│       └── K17df81RL9Y.json
│   │   ...

The files contain data from YouTube videos (from the YouTube API v3).

src/data/videos/K17df81RL9Y.json:

{
  "id": "K17df81RL9Y",
  "title": "AURORA - Cure For Me (Official Video)",
  "channelId": "UC7Lhhngb9lLW6tuPddEM62A",
  "publishedAt": "2021-07-08T17:00:10Z",
  "thumbnails": {
    "default": {
      "url": "https://i.ytimg.com/vi/K17df81RL9Y/default.jpg",
      "width": 120,
      "height": 90
    },
    ...
  }
}

I created the video/{VideosJson.jsonId}.js file inside the pages directory but the pages are being created using a different jsonId, K17df81RL9Y is transformed to k17df81-rl-9-y, apparently, the uppercase letters are being converted to lowercase and a "-" is added before the letter, weird.

{VideosJson.jsonId}.js:

import * as React from "react";

const VideoDetails = (params) => {
  return (
    <main>
      <p>My blog post contents will go here (eventually).</p>
      <pre>
        <code
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(params, null, 2),
            // __html: JSON.stringify(video, null, 2),
          }}
        />
      </pre>
    </main>
  );
};

export default VideoDetails;

This is what the params variable for the VideoDetails component look like:

{
  "path": "/video/k17df81-rl-9-y/",
  "location": {
    "pathname": "/video/k17df81-rl-9-y/",
    "search": "",
    "hash": "",
    "href": "http://localhost:8000/video/k17df81-rl-9-y/",
    "origin": "http://localhost:8000",
    "protocol": "http:",
    "host": "localhost:8000",
    "hostname": "localhost",
    "port": "8000",
    "state": {
      "key": "1664652145114"
    },
    "key": "1664652145114"
  },
  "pageResources": {
    "component": {},
    "head": {},
    "json": {
      "pageContext": {
        "id": "d7016022-e155-5686-8481-47c027f6a374",
        "jsonId": "K17df81RL9Y",
        "__params": {
          "jsonId": "k17df81-rl-9-y"
        }
      },
      "serverData": null
    },
    "page": {
      "componentChunkName": "component---src-pages-video-videos-json-json-id-js",
      "path": "/video/k17df81-rl-9-y/",
      "webpackCompilationHash": "123",
      "staticQueryHashes": []
    },
    "staticQueryResults": {}
  },
  "uri": "/video/k17df81-rl-9-y",
  "pageContext": {
    "id": "d7016022-e155-5686-8481-47c027f6a374",
    "jsonId": "K17df81RL9Y",
    "__params": {
      "jsonId": "k17df81-rl-9-y"
    }
  },
  "serverData": null,
  "params": {
    "jsonId": "k17df81-rl-9-y"
  }
}

The docs for collection routes don't mention anything for this issue.

Any idea what is happening?

Gatsby “slugifies” every route that gets created from collection pages (by using sindresorhus/slugify)

From: https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#routing-and-linking

That's why the jsonId is changed. You can configure slugify via an option in gatsby-plugin-page-creator: https://www.gatsbyjs.com/plugins/gatsby-plugin-page-creator/

It would look something like this:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/pages`,
        slugify: {
          decamelize: false,
        },
      },
    },
  ]
}