MALEV0L3NT Posts - Answer Overflow

MALEV0L3NT

Explore posts from servers

•Created by MALEV0L3NT on 4/30/2024 in #questions

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.

5 replies

TTCTheo's Typesafe Cult

•Created by MALEV0L3NT on 10/8/2023 in #questions

React-toastify display toast from Next.js api route

Hey guys, I currently has a system flow that works as follows using t3 stack: 1. User submits form on frontend 2. Some processing is offloaded to AWS Lambda by trpc procedure and procedure quits 3. Once Lambda is finished, it calls a next.js backend api route I'd like to display some feedback to the user once the next.js api route is called by Lambda, preferrably in the form of a react-toastify toast. Is it possible to invoke a frontend toast from the backend? If not, how would I go about doing something similar?

9 replies

TTCTheo's Typesafe Cult

•Created by MALEV0L3NT on 7/10/2023 in #questions

QStash vs Custom Solution?

Hi all, In an app I'm building, I have a use case where Vercel is offloading some more complex processing to an AWS Lambda function via the JS SDK. Currently, the Vercel serverless function is waiting for the Lambda function to return as the return value contains needed data. With this solution, I have been running into issues regarding Vercel funciton timeouts (on the pro plan). In my research on how I could fix this, I came across QStash which looks like a very good product and I think it would solve my issues, but it also got me thinking whether I would need it at all.. Would it be feasible for the Vercel function to call the Lambda function then exit, then the Lambda function send its return value to an API endpoint on my app for the further processing required? I've never built functionality like this before so there may be more to it than I can currently see, but in my head this should work, are there any obvious problems going with my proposed "custom" solution?

6 replies

Gaming

Programming