| undefined on tRPC procedures

MMoltenFuzzy This is a pretty noob question about typescript but a lot of the tRPC return typ...

W

whatplan•3/6/23, 4:43 AM

can you send the function on your backend where this mutation is defined

M

MoltenFuzzyOP•3/6/23, 4:44 AM

deleteOne: protectedProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ ctx, input }) => {
      const post = await ctx.prisma.post.findUnique({
        where: { id: input.id },
        select: { authorId: true, images: true },
      });
      // backend validation for user authorization to delete post
      if (post?.authorId !== ctx.session.user.id) {
        throw new TRPCError({
          code: "CONFLICT",
          message: "You are not authorized to delete this post",
        });
      }

      // delete images from s3 bucket
      for (const image of post.images) {
        s3.deleteObject(
          {
            Bucket: env.AWS_BUCKET_NAME,
            Key: `${image.userId}/${image?.postId as string}/${image.id}`,
          },
          (err) => {
            if (err) {
              console.log(err);
            }
          }
        );
      }

      return ctx.prisma.post.delete({
        where: { id: input.id },
      });
    }),

deleteOne: protectedProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ ctx, input }) => {
      const post = await ctx.prisma.post.findUnique({
        where: { id: input.id },
        select: { authorId: true, images: true },
      });
      // backend validation for user authorization to delete post
      if (post?.authorId !== ctx.session.user.id) {
        throw new TRPCError({
          code: "CONFLICT",
          message: "You are not authorized to delete this post",
        });
      }

      // delete images from s3 bucket
      for (const image of post.images) {
        s3.deleteObject(
          {
            Bucket: env.AWS_BUCKET_NAME,
            Key: `${image.userId}/${image?.postId as string}/${image.id}`,
          },
          (err) => {
            if (err) {
              console.log(err);
            }
          }
        );
      }

      return ctx.prisma.post.delete({
        where: { id: input.id },
      });
    }),

deleteOne: protectedProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ ctx, input }) => {
      const post = await ctx.prisma.post.findUnique({
        where: { id: input.id },
        select: { authorId: true, images: true },
      });
      // backend validation for user authorization to delete post
      if (post?.authorId !== ctx.session.user.id) {
        throw new TRPCError({
          code: "CONFLICT",
          message: "You are not authorized to delete this post",
        });
      }

      // delete images from s3 bucket
      for (const image of post.images) {
        s3.deleteObject(
          {
            Bucket: env.AWS_BUCKET_NAME,
            Key: `${image.userId}/${image?.postId as string}/${image.id}`,
          },
          (err) => {
            if (err) {
              console.log(err);
            }
          }
        );
      }

      return ctx.prisma.post.delete({
        where: { id: input.id },
      });
    }),

deleteOne: protectedProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ ctx, input }) => {
      const post = await ctx.prisma.post.findUnique({
        where: { id: input.id },
        select: { authorId: true, images: true },
      });
      // backend validation for user authorization to delete post
      if (post?.authorId !== ctx.session.user.id) {
        throw new TRPCError({
          code: "CONFLICT",
          message: "You are not authorized to delete this post",
        });
      }

      // delete images from s3 bucket
      for (const image of post.images) {
        s3.deleteObject(
          {
            Bucket: env.AWS_BUCKET_NAME,
            Key: `${image.userId}/${image?.postId as string}/${image.id}`,
          },
          (err) => {
            if (err) {
              console.log(err);
            }
          }
        );
      }

      return ctx.prisma.post.delete({
        where: { id: input.id },
      });
    }),

M

MoltenFuzzyOP•3/6/23, 4:46 AM

i would need to change this then?

.input(z.object({ id: z.string() }))

.input(z.object({ id: z.string() }))

.input(z.object({ id: z.string() }))

.input(z.object({ id: z.string() }))

M

MoltenFuzzyOP•3/6/23, 5:01 AM

yea i noticed it was the prisma method findUnique that was unioning the undefined type, so changing it to findUniqueOrThrow and handling the error gives me the object without the undefined typing

W

whatplan•3/6/23, 5:01 AM

Your input schema is defined as

string

string

so you must pass in a string
if what your trying to pass in is

string | undefined

string | undefined

string | undefined

string | undefined you need to handle the undefined case before you call the mutation
this is a bad place to cast, typescript is telling you things could go wrong

M

MoltenFuzzyOP•3/6/23, 5:02 AM

ah okay

MMoltenFuzzy ```ts deleteOne: protectedProcedure .input(z.object({ id: z.string() })) ...

W

whatplan•3/6/23, 5:03 AM

also you might consider awaiting the prisma call before the return statement

W

whatplan•3/6/23, 5:05 AM

you could never call the mutation at all, or

do something like this and let the backend throw the error when prisma doesnt find anything with a matching id

deletePost.mutate({id: id ?? ""});

deletePost.mutate({id: id ?? ""});

deletePost.mutate({id: id ?? ""});

deletePost.mutate({id: id ?? ""});

M

MoltenFuzzyOP•3/6/23, 5:06 AM

another question, do all trpc procedures union an undefined?

M

MoltenFuzzyOP•3/6/23, 5:07 AM

  getOne: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      const post = await ctx.prisma.post.findUniqueOrThrow({
        where: { id: input.id },
        // joins the tables
        include: {
          author: true,
          images: true,
          // likedBy: true,
          // dislikedBy: true,
        },
      });

      await embedPostImageUrls([post as FullPost]);
      return post;
    }),

  getOne: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      const post = await ctx.prisma.post.findUniqueOrThrow({
        where: { id: input.id },
        // joins the tables
        include: {
          author: true,
          images: true,
          // likedBy: true,
          // dislikedBy: true,
        },
      });

      await embedPostImageUrls([post as FullPost]);
      return post;
    }),

  getOne: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      const post = await ctx.prisma.post.findUniqueOrThrow({
        where: { id: input.id },
        // joins the tables
        include: {
          author: true,
          images: true,
          // likedBy: true,
          // dislikedBy: true,
        },
      });

      await embedPostImageUrls([post as FullPost]);
      return post;
    }),

  getOne: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(async ({ ctx, input }) => {
      const post = await ctx.prisma.post.findUniqueOrThrow({
        where: { id: input.id },
        // joins the tables
        include: {
          author: true,
          images: true,
          // likedBy: true,
          // dislikedBy: true,
        },
      });

      await embedPostImageUrls([post as FullPost]);
      return post;
    }),

W

whatplan•3/6/23, 5:07 AM

really the question is does prisma return possibly undefined
in hindsight this was actually wrong

M

MoltenFuzzyOP•3/6/23, 5:09 AM

it does not

M

MoltenFuzzyOP•3/6/23, 5:09 AM

as far as i know

W

whatplan•3/6/23, 5:09 AM

in this case

findUnqiueOrThrow

findUnqiueOrThrow

findUnqiueOrThrow

findUnqiueOrThrow will never be null, because prisma will throw if no matching item is found (what this means is the trpc query will error)
so the reason it is

type | undefined

type | undefined

type | undefined

type | undefined is because data is undefined when

isError

isError

is true

W

whatplan•3/6/23, 5:09 AM

i think

W

whatplan•3/6/23, 5:10 AM

https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#model-queries

Prisma

Prisma Client API (Reference)

API reference documentation for Prisma Client.

W

whatplan•3/6/23, 5:11 AM

this is helpful

W

whatplan•3/6/23, 5:11 AM

also

W

whatplan•3/6/23, 5:11 AM

https://tanstack.com/query/latest/docs/react/reference/useQuery

useQuery | TanStack Query Docs

const {
data,

M

MoltenFuzzyOP•3/6/23, 5:15 AM

  const {
    data: postData,
    isError,
    error,
  } = api.post.getOne.useQuery({ id: postId }, { enabled: true });

  const { data: postComments } = api.comment.getAllFromPost.useQuery(
    { postId },
    { enabled: true }
  );

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  const {
    data: postData,
    isError,
    error,
  } = api.post.getOne.useQuery({ id: postId }, { enabled: true });

  const { data: postComments } = api.comment.getAllFromPost.useQuery(
    { postId },
    { enabled: true }
  );

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  const {
    data: postData,
    isError,
    error,
  } = api.post.getOne.useQuery({ id: postId }, { enabled: true });

  const { data: postComments } = api.comment.getAllFromPost.useQuery(
    { postId },
    { enabled: true }
  );

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  const {
    data: postData,
    isError,
    error,
  } = api.post.getOne.useQuery({ id: postId }, { enabled: true });

  const { data: postComments } = api.comment.getAllFromPost.useQuery(
    { postId },
    { enabled: true }
  );

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

M

MoltenFuzzyOP•3/6/23, 5:17 AM

i added a check for errors, but the type | undefined is still there

M

MoltenFuzzyOP•3/6/23, 5:17 AM

M

MoltenFuzzyOP•3/6/23, 5:18 AM

this isnt really a big problem but adding checks to all my props isnt very pretty

W

whatplan•3/6/23, 5:18 AM

this is a weak point of typescript
it doesnt know that data + isError are connected

W

whatplan•3/6/23, 5:18 AM

I would just add

W

whatplan•3/6/23, 5:18 AM

if (isError || !postData) {
    return <span>Error: {error.message}</span>;
  }

if (isError || !postData) {
    return <span>Error: {error.message}</span>;
  }

if (isError || !postData) {
    return <span>Error: {error.message}</span>;
  }

if (isError || !postData) {
    return <span>Error: {error.message}</span>;
  }

W

whatplan•3/6/23, 5:19 AM

probably a better solution out there

M

MoltenFuzzyOP•3/6/23, 5:20 AM

hmm it still is giving me an error since the types dont match up with the props types, which i can union an undefined to fix that

M

MoltenFuzzyOP•3/6/23, 5:20 AM

W

whatplan•3/6/23, 5:21 AM

my mistake

W

whatplan•3/6/23, 5:21 AM

i updated snippet

M

MoltenFuzzyOP•3/6/23, 5:21 AM

ah

M

MoltenFuzzyOP•3/6/23, 5:21 AM

interesting

M

MoltenFuzzyOP•3/6/23, 5:21 AM

thank you

W

whatplan•3/6/23, 5:22 AM

np lmk if anything else comes up

M

MoltenFuzzyOP•3/6/23, 5:22 AM

bet tysm

MMoltenFuzzy ```ts const { data: postData, isError, error, } = api.post.getOn...

C

cornflour•3/6/23, 6:56 AM

so data will be undefined if its error or if the query is still loading
if you check for both of those cases data will stop being undefined i believe
(i havent tested with isLoading yet, but using

status==="loading"

status==="loading"

status==="loading"

status==="loading" and

status==="error"

status==="error"

status==="error"

status==="error" worked for me before, so i assume it will be the same)

M

MoltenFuzzyOP•3/6/23, 6:58 AM

^ yup

Similar Threads

Similar Threads

Similar Threads