¿Por qué usar Zod con Remix es una buena idea?

Zod es un una herramienta para validación de esquemas (schema validation tool) que tiene la hermosa cualidad de soportar Typescript, lo que le permite usar inferencia con tipos estáticos. En palabras simples, Zod es un validador de datos que soporta Typescript, con él podemos validar ayudados por Typescript cualquier dato que provenga de un formulario antes de agregarlo a nuestra base de datos y lo mejor es que podemos usar sus validaciones tanto en el frontend como en el backend, así que viene perfecto para usarlo con Remix.

Parse, don't validate

Algo que quiero destacar de Zod es su filosofía, "parsear en vez de validar" (una mala interpretación al español, mejor dilo en inglés) esta es una idea que no me resulta fácil explicar, sobre todo por que aún intento entenderla al 100%, pero haciendo un esfuerzo para este post y sin tomar prestada ninguna definición de ciencias de cómputo, intentaré parafrasearlo así: Un programa que no hace "parse" de sus entradas al principio, corre el riesgo de actuar con la porción válida de las entradas, descubriendo que la otra porción es inválida y pronto tendrá que destruir cualquier modificación que haya hecho para mantener consistencia, lo cual puede no ser posible o costar muchos recursos ¿Se entiende? Básicamente, si haces las validaciones a los datos de entrada primero mitigarás el riesgo de procesar parcialmente y esto lo logramos con "parsing". Parsear (parsing) evita este problema estratificando el programa en dos fases: Parsing & Execution. Donde el fallo por entradas inválidas solo puede pasar en la primera fase. Todas estas ideas vienen del reino de la programación funcional y son explicadas en una entrada de blog en la documentación con ejemplos en Haskell lo cual me deja saber que la barra es alta con estos creadores de librerías 🤓 Seguiré escarbando esta filosofía (seguiré subsanando mi incipiente educación pública) y prometo volver con una entrada solo sobre esto. 😉

Es fácil de usar

Una vez que instalamos zod npm i zod debemos asegurarnos de estar trabajando con el modo estricto de Typescript.

// tsconfig.json  {  
  // ... 
 "compilerOptions":  {  
	// ...  
	"strict":  true  
	} 
}

Como toda librería moderna, también es posible usarla con Deno. Una vez que tenemos todo en su lugar, podemos crear un objeto esquema que nos permita validar los datos de un formulario, en nuestro caso los datos que llegan en un formData en una función action en Remix.

👀 ¡Ojo! También puedes usar Zod como herramienta de validación en tus programas JS, no estás obligada a usar TS, pero tiene más sentido y es más saludable para tu carrera 😉

import  { z }  from  "zod";  
const userValidator = z.object({ 
	username: z.string(),
}); 
userValidator.parse({ username:  "Blissmo"  }); 
 // Podemos generar el type con la función de inferencia de Zod 
 type UserValidatorType = z.infer<typeof userValidator>;  
 // { username: string }

De esta forma solo escribimos el schema una sola vez (Incluso podrías no escribir el schema, y generarlo a partir de tu Prisma schema con herramientas como prisma-zod-generator). Con esto es suficiente para probar nuestra data antes de guardarla en la DB, algo así:

import {z} from 'zod'
import { json } from "@remix-run/node";

const userValidator = z.object({
	username: z.string().optional()
	email: z.string().email({message:"Correo no válido"})
})
	
export const action: ActionFunction = async({request})=>{
	const form = Object.fromEntries(await request.formData())
	const {success, data, error} = userValidator.safeParse(form);
	// aquí podríamos manejar los errores y enviar un mensaje más adecuado a nuestro cliente
	return json({
		success,
		data,
		error
	}, {status:success ? 200:400})
}

Este action es intencionalmente simple, solo para mostrar el uso simple de Zod, pero podríamos atrapar los errores de Zod y enviar mensajes más descriptivos para nuestro cliente por su puesto.

👀 ¡Ojo! También podríamos usar su herramienta ".required()" para hacer sólo a email requerido: userValidator.required({email:true}) Zod nos da muchas herramientas que vale la pena echarles un ojo

Es compatible con Formik... de cierta forma.

Zod puede usarse con Formik para manejar la validación, tal vez no de forma directa pues el prop validationSchema está más pensado para YUP, y aunque hay algunas librerías ya disponibles para generar un "adapter" como zod-formik-adapter La documentación de Formik sobre cómo usar el prop validate es suficiente para lograr usar Zod con formik de la siguiente manera:

// ....
<Formik
onSubmit={onSubmit}
initialValues={initialValues}
validate={(values) => {
	const  result = userValidator.safeParse(values);
	if (result.success) return;
	const  e = createValidationResult(result.error);
	return  e;
}}
>
// ...

La magia aquí la hace la función createValidationResult simplemente recopilando los errores que Zod ya nos ofrece pero en el formato que Formik espera (Record<string, string>):

export  function  createValidationResult(error: z.ZodError) {
	const  errors: Record<string, string> = {};
	for (const  x  of  error.issues) { // zodV3+
		errors[x.path] = x.message;
	}
	return  errors;
}

Eso es todo lo que Formik necesita realmente para hacer la validación de tu formulario. Ahora que puedes usar un mismo schema para validar tanto el front como el back con tipado seguro usando TS, ¡dime que no se siente bien!

Respondiendo la pregunta

¿Por qué usar Zod con Remix es una buena idea? bueno, creo que puedes darte cuenta que nos ahorra tiempo mientras agrega una capa de seguridad, sin mencionar la parte más nerd: Puedes estar seguro de tus types ¡no sólo a nivel compilador, también en runtime! Ahora podemos crear formularios más rápido, gracias a un sólo "schema" multi propósito.

Si quieres saber más sobre Remix, aquí te dejo una entrada al respecto 😉

Abrazo. Bliss.