4 replies

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)

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.

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

// 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)

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads