Building with AdonisJS & Inertia: Typing Lucid Models in Inertia with 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, 24
Duration: 10m 58s
Comments: 18

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

Visit Website

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.

Join for $8.00/mo Sign in

Join The Discussion! (18 Comments)

Please sign in or sign up for free to join in on the dicussion.

tibormarias

Commented 3 months ago

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.

1

Please sign in or sign up for free to reply
1. tomgobich
  
  Commented 3 months ago
  
  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!
  
  1
  
  Please sign in or sign up for free to reply
  1. tibormarias
    
    Commented 3 months ago
    
    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.
    
    1
    
    Please sign in or sign up for free to reply
    1. tomgobich
      
      Commented 3 months ago
      
      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.
      
      0
      
      Please sign in or sign up for free to reply
emilien

Commented 2 months ago

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 ?

1

Please sign in or sign up for free to reply
1. tomgobich
  
  Commented 2 months ago
  
  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
  
  1
  
  Please sign in or sign up for free to reply
  1. emilien
    
    Commented 2 months ago
    
    No problem, don't apologize. Updated your package and everything is working fine now, thanks a lot !
    
    1
    
    Please sign in or sign up for free to reply
    1. tomgobich
      
      Commented 2 months ago
      
      Awesome! Glad to hear everything is working for ya now! 😊
      
      1
      
      Please sign in or sign up for free to reply
      1. emilien
        
        Commented 2 months ago
        
        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 ?
        
        1
        
        Please sign in or sign up for free to reply
        
        tomgobich
        
        Commented 2 months ago
        
        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.
        
        1
        
        Please sign in or sign up for free to reply
        
        emilien
        
        Commented 2 months ago
        
        Issue created. First time I write an issue, let me know if something is missing.
        
        1
        
        Please sign in or sign up for free to reply
        
        tomgobich
        
        Commented 2 months ago
        
        Looks good, thank you emilien! I'll try and take a look into it today after work.
        
        1
        
        Please sign in or sign up for free to reply
gribbl

Commented 12 days ago
I don't know why, if it's just me or Windows, but I'm getting an error when installing the package. For those encountering the same issue, you need to add quotes.
```
node ace add '@adocasts.com/dto'
  
    
      Copied!
      
        
      
    
  
  
```
This whole DTO thing seems tedious, especially if we had to write everything by hand. Thankfully, your package exists. But is there a better way to handle this in the future, or is it a technical constraint that forces us to do like this? By the way, I think it must be the same issue with an API, right?
1

Please sign in or sign up for free to reply
1. tomgobich
  
  Commented 12 days ago
  
  Are you using NPM directly within Powershell? Powershell reserved the @ character for their splatting feature. Which means you'll either need to escape that character or wrap it in strings, as you found.
  We're using DTOs because getting an accurate serialized type for Lucid models isn't currently possible. If you use the model as a type directly in Inertia, the type will include things you don't have access to in your frontend, like .merge({}), .save(), .related('organizations'), etc.
  If you use just the model's attributes, that won't include relationships, extras, and also won't take into account serialization alterations on the model like serializeAs.
  So, currently, it is due to technical constraints in Lucid and would require some hefty refactors to remedy. Yeah, if you were trying to do end-to-end types with an API you'd run into the same constraint.
  
  1
  
  Please sign in or sign up for free to reply
  1. gribbl
    
    Commented 12 days ago
    
    Thank you for taking the time to explain this to me, it's much clearer now. 👌
    
    1
    
    Please sign in or sign up for free to reply
    1. tomgobich
      
      Commented 10 days ago
      
      Awesome, I'm glad to hear that, gribbl!! Anytime!!
      
      0
      
      Please sign in or sign up for free to reply
aaron-ford

Commented 5 days ago

The import for the UserDto works fine in my inertia.js file, but it can't be found in the AppLayout.vue file. Did I miss something? I tried going back over it and I think I followed all the steps.

1

Please sign in or sign up for free to reply
1. tomgobich
  
  Commented 1 day ago
  
  Hi Aaron! Maybe try giving VSCode a reload by hitting cmd + shift + p then select for "Developer: Reload Window"
  There's a bug in VSCode that creeps up every once in a while that causes Vue files to lose intellisense & auto imports. Even You (Vue's creator) posted about it a few months ago; you might be getting caught in that bug here. Reloading usually resolves it when I run into it.
  
  0
  
  Please sign in or sign up for free to reply