1 reply

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;
  }),
});

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} />

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>
    </>
  );
}

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?
}

model Article {
    id              String      @id @default(cuid())
    organizationId  String
    title           String
    subtitle        String?
    content         String      @db.Text
    publishDate     DateTime?
    endDate         DateTime?
}

Confused about return types of findFirst and similar

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;
  }),
});

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;
  }),
});

const article = api.article.getById.useQuery("clkem2k2m0000uf2klvuu7bfl");
...
<ArticleCard color="blue" article={article} />

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>
    </>
  );
}

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?
}

model Article {
    id              String      @id @default(cuid())
    organizationId  String
    title           String
    subtitle        String?
    content         String      @db.Text
    publishDate     DateTime?
    endDate         DateTime?
}

Confused about return types of findFirst and similar

Confused about return types of findFirst and similar

Similar Threads

Similar Threads

Similar Threads