Beyond Basic Validation: Elevating Your Form Data Handling Strategy.

Jay Boricha — Sun, 10 Mar 2024 19:02:25 +0000

Intro

Welcome back, everyone. In this blog, we will be talking about what is validation, how it is done at the front end, what tools are used and why should we validate at the front end.

What is validation?

Data validation is the process of checking the structure of the data before it is used anywhere in the project. In validation, we already have the structure of the data ready with us and we just check whether the data we have received from the user is matching our structure or not.

Why should we do data validation?

Whether it be front end or back end the data validation is one of the most important point part. With the help of data validation one can make sure that the data we are sending from frontend to the backend is in our desired format or not and if it is not in our desired format it won't be able to make it to the backend and it will throw some kind of error. At the same time in the back end when we receive any kind of data first we check the structure means we validate the data which we have received from the front end and if it matches our desired structure only then we proceed further.

How validation is done on the front-end side?

To do data validation on the front-end side there are various libraries available like yup, zod, etc.
In this blog, we are gonna use Yup for code examples but you can use the library of your own choice.

We can install yup in our react or any other front-end project by running the following command in the terminal

npm install yup

after installing the Yup library we can get started by importing a few things from it as shown in the example below.

in this example in line no. 4, we are creating a structure of how our data should look like. This structure will be used in the future to validate the input data.

Yup has a very easy-to-understand syntax that anyone can easily understand by the .object property we are telling yup that our data will be an object, and with .required() we are telling that it is a required string. In this schema example we are defining that we this will be the type of object that will have the name as required string, email with string type email and required, and so on.

After defining our data with help of this Yup schema we can also validate the data with help of .validate() method, then if there will be any error with validation we can simply get that with help of a catch block.

This was a simple explanation how we can validate data on the front-end side.

What is tRPC and how can we use it in our Apps.

Jay Boricha — Wed, 06 Mar 2024 09:22:29 +0000

Introduction

There are various ways available out there to make APIs like REST APIs, GraphQL, tRPC, and many more but today in this blog we are gonna have a look at what is tRPC how it works, why one should use tRPC, and a lot more.

Building our application fully typesafe is a thing that every developer wants to do nowadays so that they would never run into runtime errors like the Reading property of undefined. tRPC allows us to build and use fully typesafe APIs without any schema or code generation like GraphQL.

Why tRPC over REST or GraphQL ?

GraphQL and REST are the dominant way to implement typesafe APIs. If your front-end and back-end both are in Typescript then with the help of tRPC we can share types directly between our client and server, without relying on any extra code generation like we do in GraphQL.

tRPC is for full-stack Typescript developers. It makes it easy to write endpoints that you can safely use in both the front and backend of your app. Type errors with your API contracts will be caught at build time, reducing the surface for bugs in your application at runtime.

Features of tRPC

tRPC comes with a lot of features including

well-tested.
full static type-safety & autocompletion on the client for input, output, and errors.
No code extra generation.
tRPC has zero deps and a tiny clint side footprint
Easy to start with or add to your existing brownfield project.
The tRPC community has built adapters for all of the most popular frameworks.
Add typesafe observability to your application.
Requests made at the same time can be automatically combined into one

How to setup/use tRPC

1. Define backend router

Here in this image we are creating three end point to get all the users, a particular user with I'd and to create a new user.

2. Creating router instance

In this step we are initializing the tRPC backend. It's a good practise to do this in a separate file and export the helper function instead of whole tRPC.

next we will initialize our main router, commonly referred to as appRouter and we will also export the type of the router which we'll later use on the client.

3. Add a query procedure

use publicProcedure.query() to add a query procedure to the router.

In the following image, we are creating a procedure called userList that returns the list of users from our DB.

4. Using input parser to validate procedure inputs

To implement the userById procedure, we need to accept input from the client. tRPC lets you define input parsers to validate and parse the input. You can define your own input parser or use a validation library of your choice, like zod, yup, or superstruct.

You define your input parser on publicProcedure.input(), which can then be accessed on the resolver function as shown below:

here at line number 8 we will have type of input as : string
and at line number 10 we will have type of user as : User | undefined

5. Adding a mutation procedure

Similar to GraphQL, tRPC makes a distinction between query and mutation procedures.

The way a procedure works on the server doesn't change much between a query and a mutation. The method name is different, and the way that the client will use this procedure changes - but everything else is the same!

Let's add a userCreate mutation by adding it as a new property on our router object:

Now we have defined our router, we can serve it. tRPC has many adapter (tRPC is not a server on its own, and must therefore be served using other hosts, such as a simple Node.js HTTP Server, Express, or even Next.js. Most tRPC features are the same no matter which backend you choose. Adapters act as the glue between the host system and your tRPC API.) so you can use any backend framework of your choice. To keep it simple, we'll use the standalone adapter.

now we can use your backend on the client.

1. setup the tRPC Client

Links in tRPC are similar to links in GraphQL, they let us control the data flow before being sent to the server. In the example above, we use the httpBatchLink, which automatically batches up multiple calls into a single HTTP request

2. Querying & mutating

You now have access to your API procedures on the trpc object. Try it out!

now in this image at line no 2 we will automatically have user with type

const user : {
            name : string;
            id : string;
     } | undefined

and createUser with type

const createUser : {
            name : string;
            id : string;
}

Forem: Jay Boricha