#API communication between frontend and backend

54 messages · Page 1 of 1 (latest)

atomic sluice
#

Guys so I’m using nestjs obviously haha. But was looking to see how I can have some form of typesafety between client and server was going to use tRPC but like the package I found was not up to date. Anyone can help thanks I have setup swagger for api docs

neat sedge
thorn bloom
#

Hi @atomic sluice , you mean, some sort of common folder where DTOs or interfaces are shared between back and front? Am I right?

ancient obsidian
#

@atomic sluice I landed in using nestjs/swagger to be able to expose an openapi endpoint. The in my frontend repository I’m using Orval as the openapi client generator. There are many like Orval but found it quite intuitive and well maintained. Shouldn’t be a problem to rip it out and just go with something else down the line

gloomy stratus
zealous osprey
atomic sluice
#

thanks guys for the people who jumped in with these suggestions

#

im going to check all these out shortly

#

i found nestjs-zod and drizzle-zod to have actually helped anybody used these since im using drizzle for orm i found an official package called drizzle-zod which allows you to create zod scehams from db tables, meaning i can use those as my dtos and frontend dtos like under one dto

atomic sluice
#

@zealous osprey you have a really solid repo right here.

#

i was integrating better auth seems like you setup your own custom one and not use the nestjs-better-auth package.

atomic sluice
zealous osprey
atomic sluice
#

true and tbh the maintainer has been so so slow

#

at updates,

#

ill consider using ur setup for better auth instead.

#

so for configuring the auth api routes does the better auth handle mounting the route handlers

zealous osprey
#

Also his way has you disabling body parser globally which you generally need

atomic sluice
#

yeah

zealous osprey
#

No look in the auth.module

#

I mount it to the underlying express/fastify

atomic sluice
#

oh interesting

#

and then better auth handles the function calling

zealous osprey
#

Yep

atomic sluice
#

nice nice

#

dude thats sick

#

glad i came across it

#

hope you dont mind me pinching at you here and there lol

#

im using react router v7 on the frontend

#

just cuz tanstack still in beta and this projcet is for prod so yeah

zealous osprey
#

Start is in beta, tanstack router is v1

atomic sluice
#

im also using nestjs-zod for data validation / transformation i saw ur using class-transformer and class-validator

#

so im able to create dtos from zod schemas.

#

but in my case im creating dtos from drizzle-zod which is from the db type.

zealous osprey
#

You usually don’t wanna create dtos tied to your database objects

atomic sluice
#

interesting

#

im trying to figure out the right setup tbh

#

atm slightly lost

#

i dont want to manage to many types between frontend and backend

#

what do you reckon is a good appraoch

#

i have setup nestjs workflow from setting up custom exeception layer to catching errors to validation pipe which uses zodValidationPipe to validated data incoming in a route handler to be of the dto

zealous osprey
#

Nest is already an opinionated ecosystem well tested. You’d be surprised at how easy and clean things are if you stick with the “nest way”

atomic sluice
#

interesting so you mean sticking to class-validator and class-transformer

#

for validation

#

which is the reccomened validation schema.

zealous osprey
#

Yep

atomic sluice
#

got you okay.

#

i think it also helps

#

when defining the open api spec

#

swagger likes it more.

#

and on the frontend when using react hook form for example

#

which validation schema do you combo it with

#

i know shadcn form component is really good but usally needs a schema to work off of

#

so if i use class-validator for example i think i would need to create a seperate schema for the form on the frontend.