"TypeError: getStaticPaths is not a function" error in Nextjs

Question

First of I am new in Nextjs and making a blog project using T3 Stack (Nextjs, Typescript, Prisma, tRPC). I get an error like this when I want to pull the post content with the id. I will add my codes as well. I would be glad if anyone can help :)

This is my router:

getPost: publicProcedure
    .input(
      z.object({
        postId: z.string(),
      })
    )
    .query(({ ctx, input }) => {
      const { postId } = input;
      return ctx.prisma.post.findUnique({
        where: { id: postId },
        include: { Category: true, author: true },
      });
    }),

and this is my postview component:

export const PostView: FC<PostViewProps> = ({ id }) => {
  const { data } = api.posts.getPost.useQuery({ postId: id });

  return (
    <Container maxWidth="xl">
      <Box>
        <Image src={"/logo.png"} alt="logo" width={180} height={180} />
      </Box>

      <Typography variant="h4">{data?.title}</Typography>
      <Typography>{data?.content}</Typography>
    </Container>
  );
};

I tried many solution methods on the Internet and chatgpt, but I could not pass the error.

Answer 1

There might be more to it, but an immediate correction below. You need to make your handler function async and await the prisma query.

getPost: publicProcedure
    .input(
      z.object({
        postId: z.string(),
      })
    )
    .query(async ({ ctx, input }) => {
      const { postId } = input;
      return await ctx.prisma.post.findUnique({
        where: { id: postId },
        include: { Category: true, author: true },
      });
    }),