Chapters
00:00 - Why We'll Use DTOs
02:15 - Generating our DTOs from our Models
05:10 - Adding Our Organizations to the DTOs
09:10 - Using Our DTOs
Ready to get started?
Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.
Typing Lucid Models in Inertia with DTOs
In this lesson, we'll learn how we can specify types for our Lucid Models easily using DTOs we'll generate directly from our models.
- Author
- Tom Gobich
- Published
- Sep 27
- Duration
- 10m 58s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Ready to get started?
Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.
-
Getting Started
-
The Basics
-
2.0The Flow of Pages and Page Props6m 55s
-
2.1Sharing Data from AdonisJS to Vue via Inertia7m 37s
-
2.2Linking Between Pages & Page State Flow5m 58s
-
2.3The Link Component and Programmatic Linking8m 32s
-
2.4Global Components and Hydration Mismatch in Action5m 0s
-
2.5Partial and Lazy Data Loading and Evaluation9m 11s
-
2.6Creating A Layout6m 55s
-
2.7Default Layouts & Overwriting the Default Layout6m 0s
-
2.8Specifying Page Titles & Meta Tags8m 59s
-
2.9What Code Can & Can't Be Shared Between AdonisJS & Inertia3m 10s
-
-
Working with Forms
-
Database & Project Scaffolding
-
Understanding Our Database Schema2m 18s
-
Defining Our Migrations & Foreign Keys13m 48s
-
Defining Our Lucid Models & Relationships19m 8s
-
Creating A Lucid Model Mixin for our Organization Relationship8m 29s
-
Seeding Our Initial Database Data3m 39s
-
Typing Lucid Models in Inertia with DTOs10m 58s
-
Completing Our AppLayout & Navigation Bar16m 31s
-
Creating A Toast Message Manager15m 7s
-
-
Authentication & Onboarding
-
The User's Organizations
-
Setting & Loading the User's Active Organization12m 42s
-
Listing the User's Organizations6m 42s
-
The Form Dialog Component & Adding Organizations11m 51s
-
Switching Between Organizations2m 56s
-
Creating A UseResourceActions Composable8m 42s
-
Editing the Active Organization7m 0s
-
The Confirm Delete Dialog & Deleting the Active Organization18m 24s
-
-
Difficulties, Statuses, & Access Levels
-
Listing & Creating Difficulties15m 14s
-
Updating Difficulties4m 44s
-
Confirming & Deleting Difficulties4m 15s
-
Replacing A Course's Deleted Difficulty16m 31s
-
Reusable VineJS Exists In Organization Validation3m 38s
-
Sorting Difficulties with Drag & Drop9m 21s
-
Creating A Reusable Sorting Vue Component4m 1s
-
Replicating Behaviors for Access Levels & Statuses14m 28s
-
-
Courses
-
Modules & Lessons
-
Querying & Listing Sortable Course Modules14m 43s
-
Creating, Editing, & Deleting Course Modules15m 57s
-
Creating & Listing Sortable Course Lessons19m 30s
-
Editing & Deleting Course Lessons5m 9s
-
Adding A Publish Date & Time Input8m 20s
-
Patching Tag Changes for our Modules & Lessons8m 42s
-
Storing Module Order Changes from Vue Draggable8m 31s
-
Storing Lesson Order Changes & Handling Cross-Module Drag & Drops15m 44s
-
Join The Discussion! (12 Comments)
Please sign in or sign up for free to join in on the dicussion.
tibormarias
until this part i was amazed how flawlessly AdonisJS works with InertiaJS, but this DTO part for me makes it a little bit non-DRY, I understand the generator package that we installed but still.
Please sign in or sign up for free to reply
tomgobich
I agree, it does make things less DRY, but to my knowledge, in other Inertia-supported environments, you would need to define the type specifically for the frontend as well. At least with AdonisJS, we can convert it to the DTO on the server side to ensure what we're passing matches expectations on the frontend.
It would be awesome if we could directly access a serialized type of the model, but that would take quite the doing!
Please sign in or sign up for free to reply
tibormarias
By the way thank you for these videos you have great teaching skills. Is it against TS best practices if I create a types/models.d.ts file inside inertia folder and declare my models as global interfaces/types? This way I don't have to import them inside my vue files, just use them.
Please sign in or sign up for free to reply
tomgobich
That means a lot, thank you, tibormarias! Also, thank you for watching & being an Adocasts Plus member, it's greatly appreciated! Yeah, if you'd rather not use DTOs, I think that's a perfectly viable alternative approach.
Please sign in or sign up for free to reply
emilien
Hi Tom, tried using your package to generate dtos, but it gives weird names to my dtos files, it take my whoe path, for example : c_users_emilien_documents_dev_sojatask_app_models_board.ts
Am I doing something wrong ?
Please sign in or sign up for free to reply
tomgobich
Hi emilien! Terribly sorry about that! I had missed normalizing the slashes where the model's file name is determined which resulted in the whole file path being used on Windows.
Should be all fixed up in v0.0.7
Please sign in or sign up for free to reply
emilien
No problem, don't apologize. Updated your package and everything is working fine now, thanks a lot !
Please sign in or sign up for free to reply
tomgobich
Awesome! Glad to hear everything is working for ya now! 😊
Please sign in or sign up for free to reply
emilien
Sorry to bother you again. Some of my model's columns are not "generated" in the dto, do you have any idea why ? Must be pretty difficult without context, do you want me to open an issue on github ?
Please sign in or sign up for free to reply
tomgobich
Yeah, if you could create an issue that'd be great, thank you! Currently, this package reads the models as plaintext, line-by-line. So, there's room for error based on formatting. I'm hoping to refactor to instead use ts-morph which should fix those oddities up.
Please sign in or sign up for free to reply
emilien
Issue created. First time I write an issue, let me know if something is missing.
Please sign in or sign up for free to reply
tomgobich
Looks good, thank you emilien! I'll try and take a look into it today after work.
Please sign in or sign up for free to reply