show subtitle on post preview hashnode blog starter kit

Question

I'm trying to build a simple portfolio where I can easily update my work with hashnode as a headless cms. I've the github and vercel deployment setup and done almost all of the config, markup and css. Now I want to show the subtitle on the posts in my index.tsx file.

I've updated the postFragment file to include the subtitle but I had to set it to optional.

The minimal-post-preview.tsx is also updated and should fetch the subtitle so is the minimal-post.tsx but when running nothing appears on the index.tsx.

minimal-post code:

import { PostFragment } from '../generated/graphql';
import { MinimalPostPreview } from './minimal-post-preview';

type Props = {
    posts: PostFragment[];
    context: 'home' | 'series' | 'tag';
};

export const MinimalPosts = ({ posts }: Props) => {
    return (
        <section className="flex w-full flex-col items-stretch lg:max-w-lg">
            {posts.map((post) => (
                <MinimalPostPreview
                    key={post.id}
                    title={post.title}
                    subtitle={post.subtitle || ''}
                    date={post.publishedAt}
                    author={{
                        name: post.author.name,
                    }}
                    slug={post.slug}
                    commentCount={post.comments?.totalDocuments}
                />
            ))}
        </section>
    );
};

Minimal-post-preview code:

import Link from 'next/link';
import { User } from '../generated/graphql';
import { DateFormatter } from './date-formatter';

type Author = Pick<User, 'name'>;

type Props = {
    title: string;
    subtitle: string;
    date: string;
    author: Author;
    slug: string;
    commentCount: number;
};

export const MinimalPostPreview = ({ title, subtitle, date, slug, commentCount }: Props) => {
    const postURL = `/${slug}`;

    return (
        <section className="flex flex-col items-start gap-1">
            <h2 className="text-base leading-tight tracking-tight text-black dark:text-white mb-2.5">
                <Link href={postURL}>{title}</Link>
            </h2>
            <p>{subtitle}</p>
        </section>
    );
};

There shouldn't be anything to change in the index as there's only a loop for the posts. I've included this in my postFragment:

fragment Post on Post {
    id
    title
    subtitle
    url
    author {
        name
        profilePicture
    }
    coverImage {
        url
    }
    publishedAt
    slug
    brief
    comments(first: 0) {
        totalDocuments
    }
}

..and this in my graphql:

export type PostFragment = { __typename?: 'Post', id: string, title: string, url: string, publishedAt: string, slug: string, brief: string, subtitle?: string, author: { __typename?: 'User', name: string, profilePicture?: string | null }, coverImage?: { __typename?: 'PostCoverImage', url: string } | null, comments: { __typename?: 'PostCommentConnection', totalDocuments: number } };

But the subtitle does not show? Can someone help me?