T
tRPC

❓-help

client side Validation with ZOD

MAMohammed Anas1/9/2024
will trpc validate input on the client before sending it to the server ?
TTwan1/9/2024
i don't think so, thats why its fully typed so you make sure you set the right properties when sending to the server.
MAMohammed Anas1/9/2024
so the zod schema is only utilized on the server?
Kkristiandupont1/9/2024
Yes.
MMini1/9/2024
you can share zod schema with client/server
TTwan1/9/2024
but doesn't this defeat the purpose of typescript and server validation. I would have ui restrictions but there is no reason to double validate while the server already validates.
Sspaghet1/10/2024
You can share Zod schema with the client and use it for your validations. We do that with react hook form It takes care of the validations out of the box (for a CSR app) However the server uses the schema to validate the payload as well, and rejects it if it’s invalid. Which can happen if you don’t use client side validation.
MMini1/10/2024
there is some few cases, like want check validate and show error message when value is changed, it must required client side validation. (Mostly for ui/ux features)
Nnlucas1/10/2024
You can definitely achieve it using the API if you want (see errorFormatter docs) but yeah, put your zod types somewhere shared and use them on the frontend πŸ™‚

Looking for more? Join the community!

T
tRPC

❓-help

Join Server
Recommended Posts
We're having some serious Intellisense performance issues with v10Hello. We have about ~30ish routers in `mergeRouters` (we're working on changing this to a namespaceParsing FormData on trpcHi all, I have function to put object on S3 const putObjectToS3 = async (body: FormData) => { ... }TRPC to connect a client app with a backend apigateway ?Hi everyone! Is it a good practice to use TRPC to connect my client application (Next.Js) with my bWebsocket server implementations with TRPC createWSClientIs anyone aware of a websocket server that is compatible with trpc websocket client that isn't usingAdvanced Permissioning In MiddlewareI need to handle somewhat complicated permissioning logic, for example: `User A can read (but not How is the Client Generated with just the typesI'm trying to build a trpc like app for building restful apis with sveltekit. In trpc sveltekit onlyGenerate iOS Swift tRPC clientHey all, I'm looking to get pointed in the right direction for how to best generate a native tRPC cMiddleware that returns data instead of throwing errorIs there any way for a middleware to return typed data instead of throwing an error? I can only see Including multi-tenant config into tRPC contextHey all, I've been working on upgrading my app to support multi-tenancy, inspired by Vercel's PlatfSuggestion to deal with external dependencies on backend side?Hello, i have a question about dealing with external dependencies inside mutations and queries on tTRPC & Zod LoggingI'm building a backend and if my input validation fails I want to log the failure but couldn't figurHow to handle Query Errors on client side (show toast on 401)Hey ! Hope you're doing well ! I wanted to know if someone can explain to me how to handle errors onTRPCClientError: JSON Parse error: Single quotes (') are not allowed in JSONI am getting this error when deployed but not when running locally. ```json TRPCClientError: JSON PHow to access isLoading if a Query is inside a componentI am having trouble in accessing isLoading from a query, the problem is that the Query is placed instRPC and vite serverless, are there any exmaples?Now that tanstack router is out I would want to move out of nextjs, but keep the convenience of hostHow can i use inferprocedureoutput?I'd like to write this code type-safely:```ts const handleQuery = (query: /* ? */) => {} const MyCoCan a URL be formatted with dashes, such as "user-list" in the context of trpc?Can a URL be formatted with dashes, such as "user-list" in the context of trpc? ``` const appRouter Incorrect type inference with discriminated unions.Hey folks, I am having a really weird issue. Here is a minimal reproducible example: **https://tsplGet Query Key on ServerI'm following some recommended practices from one of the react query maintainers `@tkdodo` and want ReferenceError: Cannot access 'appRouter' before initializationHi friends im having trouble implementing a "protected" or "private" procedure in TRPC using Next.js