Theo's Typesafe Cult•8mo ago

Next.js app router with dynamic routes and trpc weird behaviour

Hi guys, been running into a couple issue trying to implement type safety from a dynamic route in next.js through to a zod validated trpc router... Stack: T3 with postgres (neon) and drizzle Versions: Next.js: ^14.1.4 React: 18.2.0 Zod: ^3.22.4 Behaviour: 1. Trying to implement with numbers:

// Component
export default async function test({params}: {params: { id: number }}) {
  const { id } = params;
  const team = await api.team.getById({ id: id })
}

// TRPC Route
export const teamRouter = createTRPCRouter({
  getById: publicProcedure
    .input(z.object({ id: z.number() }))
    .query(({ ctx, input }) => {
      return ctx.db.query.companies.findFirst({
        where: (company, { eq }) => eq(company.id, input.id),
      });
    }),
});

// Component
export default async function test({params}: {params: { id: number }}) {
  const { id } = params;
  const team = await api.team.getById({ id: id })
}

// TRPC Route
export const teamRouter = createTRPCRouter({
  getById: publicProcedure
    .input(z.object({ id: z.number() }))
    .query(({ ctx, input }) => {
      return ctx.db.query.companies.findFirst({
        where: (company, { eq }) => eq(company.id, input.id),
      });
    }),
});

See screenshot 1 for confirmation that the id const typing is correct (number) See screenshot 2 for error 2. Implementing using parseInt(params.id)

// Component
export default async function test({params}: {params: { id: string }}) {
  const team = await api.team.getById({ id: parseInt(params.id) })
}

// TRPC Route
export const teamRouter = createTRPCRouter({
  getById: publicProcedure
    .input(z.object({ id: z.number() }))
    .query(({ ctx, input }) => {
      return ctx.db.query.companies.findFirst({
        where: (company, { eq }) => eq(company.id, input.id),
      });
    }),
});

// Component
export default async function test({params}: {params: { id: string }}) {
  const team = await api.team.getById({ id: parseInt(params.id) })
}

// TRPC Route
export const teamRouter = createTRPCRouter({
  getById: publicProcedure
    .input(z.object({ id: z.number() }))
    .query(({ ctx, input }) => {
      return ctx.db.query.companies.findFirst({
        where: (company, { eq }) => eq(company.id, input.id),
      });
    }),
});

See screenshot 3 for working screenshot (printing out provided id) I'm happy to use the parseInt method for now but if anyone knows why this behaviour is occurring I'd be interested to know. I haven't been able to find much information online about it, or whether I'm just doing something wrong. Cheers.

2 Replies

peterkyle01•8mo ago

since we are taking data from the url in this case the id,it is by default a string so we need to convert it to a number in order to use it

MALEV0L3NTOP•8mo ago

Shit I don't think the screenshots ever uploaded... In the first code block the id in the url parameter is being typed as a number, and typescript interprets it as a number in const { id } = params. As far as I can see, TypeScript is interpreting it as a number, but Zod for some reason seems to think otherwise Oh unless TypeScript is just lying to me It would make sense that TypeScript thinks it's a number in the editor but at runtime it actually is not a number and therefore is incorrectly typed at runtime... That's probably what's happening

Gaming

Programming

Next.js app router with dynamic routes and trpc weird behaviour