Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago
MALEV0L3NT

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


See screenshot 1 for confirmation that the id const typing is correct (number)
See screenshot 2 for error

  1. Implementing using parseInt(params.id)
    ```ts
    // 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.
Was this page helpful?