Define entities and links between them to generate dynamic content on pages

[dennyabrain]

A lot of the fields specified in the frontmatter of blogs and updates are strings. Gatsby allows us to define them as entities that can then be queried in complex ways. For instance if the author of a blog post was an entity, this would allow us to query for all blog posts by an author. Since author is a person and would be listed on our team page, we could then provide a link on the team page that directs readers to all blog posts written by this person.
A similar thing could be done to link people with the projects they have worked on.

In scope for this feature would be the following :

1. Identify entities that must be defined
2. Make appropriate data related changes in the markdown files
3. Create queries for the new associations
4. Surface them in the UI

[Mahimahto]

My Understanding of the Issue

I have read the issue carefully and I understand that currently the fields defined in the blog and updates frontmatter (such as author, project, and tags) are in the form of simple strings.

Example:

author: Tarunima Prabhakar
project: Kosh
tags: bts

In this structure, these values are just text. At the system level, there is no relational connection between them.

Current Problem

Because these fields are strings:

• We cannot easily query all blog posts by a specific author.
• We cannot automatically link a team member to their blog posts from the team page.
• We cannot dynamically show related blog posts or contributors on the project page.
• The data is disconnected and non-relational.
• Filtering and grouping are limited.

Goal of This Issue

The goal of this issue is to convert selected frontmatter fields from simple strings into entities (structured data nodes).
For example:

• Author → Person entity
• Project → Project entity
• Tags → Tag entity

This will create proper relationships between the data.

Scope of Work

1. Identify Entities
First, we need to identify which fields should be converted into entities.

Likely candidates:

• author
• project
• tags

2. Markdown Data Update
We need to update the existing markdown files:

• Replace strings with slug/reference values.
• Maintain a consistent data structure.

Example:

author: tarunima-prabhakar
project: kosh

3. Create Schema & Queries

• Customize the Gatsby schema.
• Define linking between entities.
• Write GraphQL queries so that:

We can get all posts by a specific author.
We can get all posts related to a specific project.

Surface Associations in the UI

• Make the author name clickable.
• Show “View all posts by this author” on the team page.
• Show related blog posts on the project page.
• Possibly show reverse relationships (Project → People who worked on it).

Please let me know if my understanding of the issue and the proposed approach is correct.

[Mahimahto]

Implementation Plan

Based on the understanding of the issue, the goal is to convert certain frontmatter fields (such as author, project, and tags) from simple strings into structured entities. This will allow Gatsby to create relationships between blog posts, people, and projects.

The following is the implementation plan explaining the APIs, functions, and their purpose.

---

Step 1 — Update Frontmatter to Use Slug References

Currently, blog and update files store values as plain text.

Example:

author: Tarunima Prabhakar
project: Kosh
tags: bts

These values should be converted into slug-based references so that they can be linked with entity nodes.

Updated example:

author: tarunima-prabhakar
project: kosh

tags:
  - bts

Using slugs makes the references consistent and allows Gatsby to connect blog posts with the correct entities.

---

Step 2 — Use Existing Entity Content (People and Projects)

The project already contains entity-based content in folders such as:

src/blog
src/people
src/project

Each file inside these folders becomes a node in Gatsby’s data layer.

Example:

src/people/tarunima-prabhakar.mdx

Example frontmatter:

name: Tarunima Prabhakar
slug: tarunima-prabhakar
role: Researcher

During the build process, Gatsby converts this file into a Person node, which can later be referenced by blog posts.

---

Step 3 — Generate Slugs for All Content Nodes

To uniquely identify each node and create page URLs, a slug field needs to be generated.

Gatsby API Used

onCreateNode

Purpose

This API runs every time Gatsby creates a node from a content file.
It allows us to add additional fields to that node.

Function Used

createNodeField

Syntax

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === "Mdx" || node.internal.type === "MarkdownRemark") {
    const value = createFilePath({ node, getNode })

    const slug = value.startsWith("/") ? value.slice(1) : value

    createNodeField({
      name: "slug",
      node,
      value: slug,
    })
  }
}

Why This Is Used

This function adds a new field called slug to every MDX node.

Example result:

src/blog/shubharambh.mdx

Slug generated:

shubharambh

This slug is used for:

• page URLs
• linking entities
• GraphQL queries

---

Step 4 — Define Relationships in the GraphQL Schema

After converting frontmatter values into slugs, we need to define relationships between nodes.

Gatsby API Used

createSchemaCustomization

Purpose

This API allows developers to customize Gatsby’s GraphQL schema and define relationships between nodes.

Function Used

createTypes

Example Syntax

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type MdxFrontmatter {
      author: Mdx @link(by: "fields.slug")
      project: Mdx @link(by: "fields.slug")
    }
  `)
}

How This Works

This schema tells Gatsby that:

• the author field should link to another MDX node
• the connection should happen using the slug field

Relationship created:

Blog Post → Author → Person Node
Blog Post → Project → Project Node

Now Gatsby understands that the author and project fields are linked entities instead of simple text.

---

Step 5 — Query Related Content Using GraphQL

Once relationships are created, we can query connected content using GraphQL.

Example query to get all posts written by a specific author:

{
  allMdx(
    filter: {
      frontmatter: {
        author: { fields: { slug: { eq: "tarunima-prabhakar" } } }
      }
    }
  ) {
    nodes {
      frontmatter {
        title
        date
      }
    }
  }
}

This query returns all blog posts where the author slug matches the given person.

Earlier this was not possible because the author field was just plain text.

---

Step 6 — Create Pages for Entities

The project already uses the Gatsby API createPages to dynamically create pages.

Gatsby API Used

createPages

Function Used

createPage

Example Syntax

createPage({
  path: `/people/${node.fields.slug}`,
  component: require.resolve(`./src/components/default-people-layout.js`),
  context: { id: node.id },
})

Purpose

This function programmatically creates pages for each entity.

Example result:

/people/tarunima-prabhakar

Similarly, project pages can be created:

/project/kosh

---

Step 7 — Display Relationships in the UI

After relationships are defined, they can be surfaced in the UI.

Blog Page

The author name can link to the person page.

Example:

By Tarunima Prabhakar

Link:

/people/tarunima-prabhakar

---

Person Page

Each person page can display all blog posts written by that person.

Example:

Blogs by Tarunima Prabhakar

• Post 1
• Post 2
• Post 3

---

Project Page

Project pages can show all blog posts related to that project.

Example:

Posts related to the Kosh project

---

Expected Result

After implementing these changes:

• Blog posts will be connected to authors.
• Authors will have their own pages.
• Projects will show related blog posts.
• Tags and projects can be used for filtering.

Question

Before starting the implementation, I wanted to confirm if this approach aligns with the expected solution for this issue.
Does this plan look correct, or are there any changes you would recommend before proceeding with the implementation?