Exploring Zod and the Benefits of Schema-Based Validation in TypeScript Projects

Awais — Sun, 14 Apr 2024 22:49:40 +0000

Introduction

This post explores Zod, a library that provides "TypeScript-first schema validation with static type inference". We'll explore how it works and why it's so useful.

Manual Validation

If you've found yourself manually writing validation checks it can get tedious pretty quickly. For example, you might need to write checks to make sure that required fields are provided and data is in the correct format and/or fits certain parameters like a number being within a certain range.

if (name === '') {
  errors.push('Name is required')
}

if (name.length < 3) {
  errors.push('Name must be at least 3 characters')
}

if (name.length > 30) {
  errors.push('Name must be 30 or fewer characters long')
}

Schema Validation

This is where Zod comes in really handy. Here's an example of how we can define a userSchema where name, age, email are all required with their expected types and a min/max length for the name. To make it optional you will need to add .optional().

import { z } from 'zod';

// Define the schema with validation rules
const userSchema = z.object({
  name: z.string().min(3).max(30),
  age: z.number(),
  email: z.string().email()
});

// Infer TypeScript type from the schema
type User = z.infer<typeof userSchema>;

// Parse data using the schema and handle the result
const result = userSchema.safeParse({ name, age, email })

if (result.success) {
  // Everything looks good and valid
} else {
  // Invalid... handle using result.error
}

Using z.infer you can infer the TypeScript type from the Zod schema which is also really handy to avoid duplication and have it automatically update when the userSchema is updated.

Zod provides detailed validation messages which can also be customised like so:

const name = z.string({
  required_error: "Name is required",
  invalid_type_error: "Name must be a string",
});

Conclusion

Zod is a great tool to write cleaner and simpler code for validation. Share your experiences with these tools in the comments.

Quick introduction to the Prisma ORM

Awais — Sat, 13 Apr 2024 14:32:59 +0000

Introduction

This post explores Prisma, an ORM, which stands for Object Relational Mapper. If you're not familiar with ORMs the idea is you can communicate with your database using JavaScript objects and function calls rather than having to write raw SQL queries. This has the benefit of being much simpler to write and improve your productivity.

Getting Started with Prisma

To get started install the Prisma CLI as a dev dependency in your TypeScript project:

npm install prisma --save-dev

Set up the Prisma ORM with the init command of the Prisma CLI:

npx prisma init --datasource-provider sqlite

This will create a .env file and a prisma directory with a schema.prisma file.

The .env file will contain the environment variable for the DATABASE_URL with the path to the SQLite database:

DATABASE_URL="file:./dev.db"

One-to-Many relationship

The schema.prisma file will contain the Prisma schema where you can define your data model.

Here's an example of this showing a one-to-many relationship between users and posts:

model User {
  id    String  @id @default(uuid())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        String  @id @default(uuid())
  title     String
  content   String?
  published Boolean @default(false)
  author    User    @relation(fields: [authorId], references: [id])
  authorId  String
}

The models map to tables in the SQLite database. Inside the model are the column names with their data types and field attributes. For example, you can ensure fields are unique by setting the @unique attribute and default values using @default.

The @relation attribute is used to show the connection between two models. In this example, authorId is a foreign key column in the Post table and references the primary key id in the User table. You can explore this more in Prisma Studio later.

To push the changes in the Prisma schema file to the database run the npx prisma db push command. This is useful for quick iterations. When you're ready to commit to the changes you can create a migration using the npx prisma migrate dev --name init command where init is the name of the migration. This way you can keep track of schema changes over time.

Prisma Studio

Run the npx prisma studio command to explore your database in a special web app. This will allow you view/add/edit the data in your database.

Querying Data

Here's an example of using select to select specific fields.

const postTitles = await prisma.post.findMany({
        select: {
            title: true
        }
});

You can also perform other CRUD operations such as creating, reading, updating and deleting data in a similar way.

Raw Queries

💡 There may be times where what you want to do is not supported in which case you can drop down to SQL with the raw query API.

Conclusion

This post explored getting started with Prisma and some of its features. Share your experiences working with Prisma or other ORMs in the comments.

DEV Community: Awais

Exploring Zod and the Benefits of Schema-Based Validation in TypeScript Projects

Introduction

Manual Validation

Schema Validation

Conclusion

Quick introduction to the Prisma ORM

Introduction

Getting Started with Prisma

One-to-Many relationship

Prisma Studio

Querying Data

Raw Queries

Conclusion