Currently diving into the world of CRUD operations in NextJS using TypeScript and Prisma with TanstackQuery. I am facing an issue where I am trying to display the tag.name, but unfortunately, I keep encountering an undefined error when attempting to fetch it.
https://i.sstatic.net/TqTgJ.png
In my Homepage component, I retrieve all the necessary data and pass it down to my <PostCard />.
async function getPost() {
const response = await db.post.findMany({
select: {
id: true,
title: true,
content: true,
},
orderBy: {
createdAt: 'desc'
}
})
return response
}
const Home = async () => {
const posts = await getPost();
return (
<main>
{posts.map(post => (
<PostCard key={post.id} post={post} />
))}
</main>
);
};
The PostCard component is where I receive the props passed down from my homepage.
import { Tag } from "@prisma/client";
interface PostCardProps {
post: {
id: string,
title: string,
content:string,
tag: Tag
}
}
const PostCard = ({post}:PostCardProps) => {
const {title, content, tag} = post
return (
<div>
<h2 className="card-title">{title}</h2>
<p>{content}</p>
<div className="card-actions justify-end">
<Link href="/blog/1">
Read more...
</Link>
</div>
</div>
);
};
Below is my Prisma Schema defining the relationship between post and tags:
model Tag {
id String @id @default(cuid())
name String @db.VarChar(100)
Post Post[]
}
model Post {
id String @id @default(cuid())
title String @db.VarChar(225)
content String
tagId String
Tag Tag @relation(fields: [tagId], references: [id], onDelete: Cascade)
}