How to create dynamic content/Pages using JSON files in Gatsby? - json

Question

I wish to create a complex routing in Gatsby using multiple JSON files:
First JSON file is based on routing:
File Location: /src/data/route.json
[
{
type: "Article",
title: "Post One",
slug: "/post-one",
data: "post-one.json"
},
{
type: "Course",
title: "Course One",
slug: "/course-one",
data: "course-one.json"
},
...
]
It is the Json file which contains route data.
Now in post-one.json file contains all the required data about the post that is required to render the post.
File Location: /src/data/articles/post-one.json
Routes: /post-one
{
title: "Post One",
head: {
title: "Some title here",
image: "/path/to/image.jpg",
description: "Some description here..."
},
body: {
// Body data here
...
}
}
But the main problem arises now as the courses is the collection of the different chapters.
Now for the main course page:
File location : /src/data/courses/course-name.json
Route is like: /course-name
{
title: "Course One",
head: {
title: "Some title here",
image: "/path/to/image.jpg",
description: "Some description here..."
},
info: {
// Some info about the course...
},
chapter: [
{
title: "chapter one",
slug: "/:courseId/chapter-one",
description: "Something about the chapter"
},
{
title: "chapter two",
slug: "/:courseId/chapter-two",
description: "Something about the chapter"
},
...
//Multiple chapters in the same course
]
}
Now the chapters will have the data like
File location : /src/data/chapters/chapter-name.json
Route: /courseId/chapter-name
{
title: "Chapter one",
description: "Some description here",
body: {
...
//Content for the body that can be rendered easily
}
}