Confused about return types of findFirst and similar
I'm struggling with getting data back from tRPC router with Prisma. I expect the strongly typed Article object to be assigned to const x. IDK if it's a {props} thing or what. Honestly there are so many technologies in play I'm not sure where to start.
Questions:
1. What data type is findFirst() returning in this instance?
2. How do I properly pass it via props to the functional component?
export const articleRouter = createTRPCRouter({
getById: publicProcedure.input(z.string()).query(async ({ ctx, input }) => {
const x = await ctx.prisma.article.findFirst({
where: {
id: input,
},
});
return x;
}),
});
My expectation would be that a findFirst() would return an object of type Article, but that doesn't seem to be the case. In the snippet below the attribute "blue" is passed to ArticleCard fine and I can use it as expected. However the Article object is of the wrong type according to a message I can't begin to decipher (all the way at the end of this post)
const article = api.article.getById.useQuery("clkem2k2m0000uf2klvuu7bfl");
...
<ArticleCard color="blue" article={article} />
import { Article } from "@prisma/client";
export interface ArticleProps {
article: Article;
color: string;
}
export default function ArticleCard(props: ArticleProps) {
return (
<>
<Typography variant="h3" className="text-blue-500">
{props.article.title} Yay! {props.color}
</Typography>
{props.article?.subtitle ? (
<Typography variant="h5">{props.article?.subtitle}</Typography>
) : (
<></>
)}
<Typography variant="body1">{props.article.content}</Typography>
</>
);
}
-- model
model Article {
id String @id @default(cuid())
organizationId String
title String
subtitle String?
content String @db.Text
publishDate DateTime?
endDate DateTime?
}1 Reply
findFirst should return either an Article | null depending on if it can find it or not. I'm not too familiar with TRPC, but when you call api.article.getById.useQuery("clkem2k2m0000uf2klvuu7bfl") that looks like an async function, so you might have to await it. If you can post the type error I may able to see what the issue is.