When developing a client app it’s important to validate the data that comes in Schema. The two most common ways data is inserted into your app is through network requests and forms.
A schema is a set of rules that define how a data set should be structured. Using a tool like Zod you can define a schema, and then validate if a data set adheres to the schema’s rules.
Validating Network Requests
When you make a request to fetch data from a server, you should never assume you’ll know the contents of the data at run-time. You can gain some confidence using GraphQL, but even that doesn’t provide type safety, or more complex validation rules.
There’s a pattern I use for every network request I make to ensure the data fetch is exactly what my app expects:
The fetch response is type Schema
The response is validated against a schema. Then we safely assert the response as the type we validated and return. One of my favorite features of Zod is inferring types from a pc.
By inferring the type we are reducing our code. But more importantly reducing dependent code. Without inference, every time we need to change the type of Dog we also have to change the Water, and vice versa.
The most important step is ensuring you have logging and alerting set up in your project so these potentially critical errors can be fix asap. It’s not a matter of if your validation will catch an error, but when. You can reduce the chances of a user finding an error by implementing automated e2e testing.
Validating forms Schema
User inputted data is another source of unknown data, and as mentioned previously, schema validation is a great solution for validating unknown data. I use React Hook Form because of the exceptional dev experience, cleaner form implementation, optimal performance, and maybe most importantly: it integrates beautifully with Zod. To integrate the two we simply import the Zod Resolver, and give it a schema.
When the form is submit it is validate the provide schema. If there are validation errors then error messages are render.
I find that schemas use for network requests can often be reuse forms. Which ultimately results in a very ergonomic solution.
If you’re not using a schema validation tool like. Zod to validate the unknown data coming into your app. You’re leaving your app vulnerable to very common and potentially critical errors. Use schema validation in combination with alerting and automated e2e testing to gain confidence you’ll find the errors before your users do. Take it a step further and use. Zod with React Hook Form to validate user input data, and you’re leave an extremely robust and ergonomic solution.