@aaron-ford

Ah, 7 is out! How hard is it to upgrade our v6 project to 7? Is there a video for upgrading plotmycourse, or is it pretty straight forward?

Has @adocasts.com/actions not been updated to work with 7?

Thanks for the help. I think there were several things I had to correct, but I got it running! I can't login yet (I think I might have a CSRF issue to fix), but it's running.

I built and ran it locally and I get ERROR (7830): Failed to load url inertia/app/ssr.ts (resolved id: inertia/app/ssr.ts). Does the file exist?. The entry point for inertia is inertia/app/ssr.ts as defined in the vite.config.js and config/inertia.js files. But npm run build doesn't create an inertia folder, so I assume that is why it is failing? There is no inertia folder with app/ssr.ts. There is an app folder with ssr.ts in it. So when building and running from the build folder, is the entry point supposed to change somehow? Or is it building wrong and it should be putting an inertia folder in the build? After configuring the server, here are the steps I take to build and run the app:

1. npm run build

2. cp .env build/.env

3. cd build

4. npm ci —omit="dev"

5. pm2 start build/bin/server.js --name myApp

When I run node bin/server.js locally I also get this message: Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

I will double check the node versions, but it seems ctx.auth is undefined on the login page, which makes sense since no one is logged in. But since that isn't an issue locally it seems odd. The app is running but the front end doesn't load. Here's the error:

{"type":"TypeError","message":"Cannot read properties of undefined (reading 'use')","stack":"TypeError: Cannot read properties of undefined (reading 'use')

Rather than have someone have to know the ids relations, how would it be best to implement using a string? Like for status ID. I can give the user a list of valid statuses. They want to make an API call with a status of 'Planned'. I can have my validator verify that planned exists in the statues table, that's fine, but I want to call the parameter in the API call status, not statusId, since it isn't an ID. That means the validator needs to validate the status 'Planned' exists in the statuses table, and then when we pass the results of the validation to the store course method, it expects a type of courseValidator, which now has status instead of statusId, which doesn't exist on the table. So I'm not sure if I should transform API parameter names before passing the data to the validator, so when the data gets to the validator and the store action the parameters match the DB, or if I should validate and then transform? Transforming before validating kind of seems to reduce the usefulness of the validator, but transforming after validation means we're changing the type expected by the store action to some new transformed object. What would be the best way to do something like this? I hope that makes sense. Essentially I want to use human readable data in the API which requires a parameter name different than the validator/table, but validate it against DB values so the action can use the validated data to create the data in the DB.

Can we clean up the error responses and not have it return the frames array? Just message, name, status?

How do you prevent hydration errors on the dates? The server is rendering a different date then the front end, which seems to make sense if we are formatting it to the locale of the user, but it doesn't seem to like that.

The reason it could use the same table is because a course is linked to an organization, right? If I wanted to have API keys for something not linked to an organization, I'd have to have a separate table, since the tokenable_id in the table would have to reference a different table? Or if say you wanted someone to be able to make changes to a course but not the overall organization? You'd make a token table that references the courses model, or whatever model you want to grant rights to?

table
        .integer('tokenable_id')
        .notNullable()
        .unsigned()
        .references('id')
        .inTable('otherModelName')
        .onDelete('CASCADE')

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

So if we need multiple access tokens, like say we wanted to make it so courses could have tokens to modify their data within an organization, we could just add the DbAccessTokensProvider.forModel(Courses, {

type: 'course_ api_token',

prefix: 'api'

}

to the courses model, but would we want to copy the migration and make a second course_api_access_tokens table to use for the table parameter in the DbAccessTokensProvider? Or is there a way to use the one api_access_tokens table? Can both use the same type of api_token? Since they are both for api calls? Or do they have to have different types? I assume it would also require adding something like

courseApi: tokensGuard({
      provider: tokensUserProvider({
        tokens: 'accessTokens',
        model: () => import('#models/courses'),
      }),

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

to the auth.ts config file. I assume If everything set up in this video is duplicated for a second api, the rest of the videos in this series just be applicable to either guard.

I have been going through trying to clean up my console errors. I have an error for 'Extraneous non-props attributes (user, messages) were passed to component but could not be automatically inherited because component renders fragment or text root nodes'. I ran your code and see the error exists there too. How do we fix this? I also get Invalid prop: type check failed for prop "href". Expected String with value "null", got Null for the pagination links. I tried modifying the components to allow null for the href, but that didn't work. Does the pagination dto npm package need to be modified?

Update: I wrapped the nav and sheet into a parent div and that seems to fix the hydration issues. Either that, or listing user and messages in the props, but since the nav doesn't directly use them, I went with wrapping it in a div.