Enhanced validation in Nest.js

Hallo teman teman semuanya 👋
Perkenalkan Saya Bambang Mohammad Azhari , Seorang Software Engineer 💻.

Pada artikel ini , Saya akan membagikan sebuah tips yang mungkin saja bermanfaat bagi anda sebagai Software Engineer (Terkhusus Backend Developer yang menggunakan stack Javascript/Typescript Nest JS).

Apa saja yang akan dibahas pada artikel ini :
✨ Validasi menggunakan Class Validator (Recomendation Package Validation in Official Nest JS )
🚀 Improve dan Enchance Validation , supaya lebih mudah diolah bagi mesin apapun yang mengkonsumsi API nya.

Dan untuk roadmap dari pembahasan nya akan dibagi menjadi beberapa bagian :
1️⃣ Fresh Install Nest JS
2️⃣ Install Package validation nya. Dari typestack/class-validator (Main package validation-nya) dan typestack/class-transformer (Support package)
3️⃣ Setup default validation
4️⃣ Try and Improve Validation

1️⃣ Install fresh Nest JS yang sudah tersedia di-dokumentasi Nest JS nya langsung. Docs Nest.JS

npm i -g @nestjs/cli
nest new project-name

Sesuaikan dengan package manager yang anda gunakan , seperti NPM, Yarn, PNPM. Tidak ada concern khusus disini harus menggunakan pnpm.

Selanjutnya coba jalankan project polosan tersebut dengan command
pnpm run start:dev , pastikan ketika dijalankan tidak memunculkan error.

Command tersebut akan berjalan default di-port 3000 , jika anda mencoba hit dengan menggunakan postman. Maka akan muncul halaman default dari Nest JS nya (Hello World).

Kita akan modifikasi endpoint ini untuk kebutuhan validasi `app.controller.ts` dan untuk test nya `app.controller.spec.ts` dan `app.e2e-spec.ts` kita bisa coba kosongkan isi file nya terlebih dahulu (guna menghilangkan warning syntax error di interpreter typescript-nya, sehingga untuk `app.controller.ts` nya akan menjadi seperti dibawah ini :

2️⃣ Selanjutnya kita coba install package class-validator , bisa dilihat di-dokumentasi NestJS nya juga. Docs NestJS Validator dengan Pipeline

pnpm add class-validator class-transformer

Package class-validator adalah main package untuk validation Nest.JS nya itu sendiri yang menggunakan teknik decorator terhadap class.

Sedangkan class-transformer adalah kumpulan function helper untuk parse dari plain object ke DTO yang akan kita tentukan di tahap selanjutnya

3️⃣ Kita setup dahulu simple validation default dari yang direkomendasikan oleh NestJS nya. Docs Nest JS Autovalidation

Lalu kalau kita coba hit dengan postman, maka hasilnya akan seperti berikut.

2. Default validation Nest.Js

Jika anda seorang frontend developer , maka anda akan menyadari 1 hal yang kurang sesuai dengan ekspetasi anda.

Yapp betul , disana hanya terdapat message array nya saja.
Tidak ada mapping terhadap property yang terkena validation nya.
Hal ini akan sangat menyulitkan dari segi frontend jika pesan tersebut harus dimapping ke dalam form (dalam hal ini form input name, email).

Tujuan artikel ini tidak lain dan tidak bukan adalah untuk hal itu. Mari kita improve fitur validasi bawaan NestJS ini.

4️⃣ Mari kita Improve Validation bawaan dari NestJS ini

Kita akan coba improve dibagian file `main.ts` dan menambahkan Pipes pada NestJS nya lalu setelah itu result dari pipes nya kita throw error ke dalam custom exception. Sehingga nanti untuk hasilnya kita bisa rekayasa sesuai dengan keinginan kita.

Buatlah file baru untuk membungkus code custom validation ini agar rapi , dalam contoh ini saya akan beri nama `validation.filter.ts`
Lalu panggil fungsi fungsi yang ada di validation filter tersebut ke dalam `main.ts` nya.

Pada main.ts , kita menambahkan customPipes dan customException yang mana untuk customPipes itu akan dipanggil secara global di app.useGlobalPipes() sedangkan untuk customException di app.useGlobalFilters().

Cara kerja dari validasi ini adalah dengan melakukan convert/parsing melalui pipe (sebelum dikembalikan menjadi response) menggunakan fungsi bawaan dari ValidationPipes dengan sedikit modifikasi di exceptionFactory.

Fungsi exceptionFactory ini akan membuat globalPipes tadi possible to throw error sehingga kita bisa memanfaatkan throw error ini sebagai customError dan memanipulasi nya sesuai kehendak kita.

Jika kita coba hit dengan postman , maka akan muncul result sebagai berikut.

3. Improved Validation NestJS

Terdapat property data yang siap diambil dan diolah bagi consumer nya. Sudah terlihat better bukan ?? 🔥🔥

Namun disini masih terdapat bugs , jika terdapat nested validation result nya akan unexpected. Oleh karena nya kita akan langsung improve , supaya support nested validation nya.

Sehingga final file dari `validation.filter.ts` akan seperti diatas. Di file tersebut hanya menambahkan fungsi recursive saja terhadap children yang dimiliki dengan delimiter dot (.) untuk setiap property dan child nya.

Kalau kita coba hit lagi dengan postman , maka hasil nya akan sesuai dan as expected.

4. Improved Validation Nested Nest.JS

Penutup 🚀

Meskipun banyak tools dan package untuk handle validasi di NestJS tidak semuanya adalah pilihan yang baik. Rekomendasi saya untuk pemilihan tools / package bisa diawali dahulu dengan officialy package. Karena ini adalah didasarkan rekomendasi Nest.JS nya juga (officially recommended) , hal ini bisa menjadi salah satunya alternatif bagi anda yang ingin meningkatkan kemampuan validasi dari bawaan Nest.JS itu sendiri.

Dengan adanya mappingan error terhadap property , ini akan memudahkan consumer API tersebut untuk memanipulasi jika terjadi error karena validasi.

Jika anda membutuhkan repository nya , silakan bisa lihat disini : Github Repository

Terima kasih sudah baca artikelnya , Sekian.

Saya Bambang Mohammad Azhari. Software Engineer. Web and Mobile Developer. PHP and Typescript Enthusiast. Jika ingin berkenalan lebih dekat dengan saya , silakan cek website pribadi saya di https://azhari.my.id

Ada banyak konten keren lainnya di sana ! Yuk , jadikan kesempatan ini untuk mengasah kemampuan coding kamu 🔥💻