Blitz Posts

Blitz

•Created by Blitz on 8/15/2023 in #❓-help

Need help with type hinting a function that accepts a trpc client router

interface CreateModelProps<GetResult> {
    name: string,
    procedures: DecoratedProcedureRecord<{
        read: BuildProcedure<"query", any, any>
        create: BuildProcedure<"mutation", any, any>,
        update: BuildProcedure<"mutation", any, any>,
        delete: BuildProcedure<"mutation", any, any>,
    }, any>,
}

interface CreateModelProps<GetResult> {
    name: string,
    procedures: DecoratedProcedureRecord<{
        read: BuildProcedure<"query", any, any>
        create: BuildProcedure<"mutation", any, any>,
        update: BuildProcedure<"mutation", any, any>,
        delete: BuildProcedure<"mutation", any, any>,
    }, any>,
}

got this so far, but a router with all these routes defined raises a veryyy long type error. so im assuming im doing something very wrong. Anyway, here is the full trace

Type 'DecoratedProcedureRecord<{ hello: BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<PrismaClientOptions, never, DefaultArgs>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>; getAll: ...' is missing the following properties from type 'DecoratedProcedureRecord<{ read: BuildProcedure<"query", any, any>; create: BuildProcedure<"mutation", any, any>; update: BuildProcedure<"mutation", any, any>; delete: BuildProcedure<...>; }, any, "">': read, create, update, deletets(2739)
models.tsx(155, 5): The expected type comes from property 'procedures' which is declared here on type 'CreateModelProps<{ tags: { id: string; name: string; }[]; } & { id: string; name: string; content: string; }>'

Type 'DecoratedProcedureRecord<{ hello: BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<PrismaClientOptions, never, DefaultArgs>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>; getAll: ...' is missing the following properties from type 'DecoratedProcedureRecord<{ read: BuildProcedure<"query", any, any>; create: BuildProcedure<"mutation", any, any>; update: BuildProcedure<"mutation", any, any>; delete: BuildProcedure<...>; }, any, "">': read, create, update, deletets(2739)
models.tsx(155, 5): The expected type comes from property 'procedures' which is declared here on type 'CreateModelProps<{ tags: { id: string; name: string; }[]; } & { id: string; name: string; content: string; }>'

2 replies

TtRPC

•Created by Blitz on 7/25/2023 in #❓-help

avoiding used more hooks than previous render

I understand whats causing the error in my code, im checking if id is defined before calling useQuery as it requires it to be passed in.

const Update = () => {
    const router = useRouter()
    const { id } = router.query
    if (!id) return <>Invalid ID</>
    
    const readOneQuery = procedures.readOne.useQuery({ id: id as string })
    
    if (readOneQuery.isLoading) return <ScreenLoader />
    if (readOneQuery.isError) return <>Something went wrong while fetching data</>


    return <FormBuilder type="update" model={model} procedures={procedures} currentId={id as string} prefill={readOneQuery.data} />

}

const Update = () => {
    const router = useRouter()
    const { id } = router.query
    if (!id) return <>Invalid ID</>
    
    const readOneQuery = procedures.readOne.useQuery({ id: id as string })
    
    if (readOneQuery.isLoading) return <ScreenLoader />
    if (readOneQuery.isError) return <>Something went wrong while fetching data</>


    return <FormBuilder type="update" model={model} procedures={procedures} currentId={id as string} prefill={readOneQuery.data} />

}

How do i make sure useQuery is only called when is becomes defined, but in the same time calling it before the null check of id?

5 replies

TtRPC

•Created by Blitz on 2/10/2023 in #❓-help

Validating input inside middleware declaration

const enforceUserIsCreatorOfEvent = t.middleware(({ ctx, next, input }) => {
  if (!input.eventId || !ctx.session?.user) {
    throw new TRPCError({ code: "BAD_REQUEST" });
  }
  
  const { eventId } = input;
  const { user } = ctx.session;

  if (!user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  const event = await ctx.prisma.event.findUnique({
    where: {
      id: eventId,
    },
  });

  if (!event) {
    throw new TRPCError({ code: "NOT_FOUND" });
  }

  if (event.creatorId !== user.id) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  return next();
}

const enforceUserIsCreatorOfEvent = t.middleware(({ ctx, next, input }) => {
  if (!input.eventId || !ctx.session?.user) {
    throw new TRPCError({ code: "BAD_REQUEST" });
  }
  
  const { eventId } = input;
  const { user } = ctx.session;

  if (!user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  const event = await ctx.prisma.event.findUnique({
    where: {
      id: eventId,
    },
  });

  if (!event) {
    throw new TRPCError({ code: "NOT_FOUND" });
  }

  if (event.creatorId !== user.id) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  return next();
}

But type of input is unknown and gives rise to a bunch of type errors Apologies in advance for the newbie question

4 replies