Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

robot mascot smiling

Querying & Listing Sortable Course Modules

In this lesson, we'll query and add a sortable list of a course's modules on the courses show page.

Published
Dec 06, 24
Duration
14m 43s

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

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

Chapters

00:00 - Querying A Course's Modules
02:06 - Providing the Modules to our Page
02:30 - Deep Cloning our Modules with structuredClone
03:44 - Displaying the Course's Module & Lesson Counts
04:50 - Listing the Course's Modules Using VueDraggable
10:32 - Implementing our SortableModules Component
10:52 - Adding A Module To Test Our List Using Node REPL
12:12 - A Hydration Mismatch Note for Vue 3.4 & Shadcn-Vue
13:25 - Adding Lessons to our ModuleDto

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 The Discussion! (4 Comments)

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

  1. Commented 8 days ago

    How can i log the query to check if i am writing query correct or not?

    console.log(query.toSQL())

    is not working for me. Any way that i can log query and check in storage/logs/adonis.log?

    1

    Please sign in or sign up for free to reply

    1. Commented 7 days ago

      Hi Rajeeb!

      Console logging a call to toSQL() as you have should work, you should be seeing something like the below in your console.

      However, there is a nicer way to do this, using pretty printed query logging. Within your config/database.ts, set prettyPrintDebugQueries: true.

      
      const dbConfig = defineConfig({
        prettyPrintDebugQueries: true, // 👈
        connection: 'postgres',
        connections: {
          postgres: {
            client: 'pg',
            connection: {
              host: env.get('DB_HOST'),
              port: env.get('DB_PORT'),
              user: env.get('DB_USER'),
              password: env.get('DB_PASSWORD'),
              database: env.get('DB_DATABASE'),
            },
            migrations: {
              naturalSort: true,
              paths: ['database/migrations'],
            },
          },
        },
      })
      Copied!
      • config
      • database.ts

      Then, you can either globally enable query logging, by adding a debug: true to your driver object.

      
      const dbConfig = defineConfig({
        prettyPrintDebugQueries: true,
        connection: 'postgres',
        connections: {
          postgres: {
            debug: true, // 👈
            client: 'pg',
            connection: {
              host: env.get('DB_HOST'),
              port: env.get('DB_PORT'),
              user: env.get('DB_USER'),
              password: env.get('DB_PASSWORD'),
              database: env.get('DB_DATABASE'),
            },
            migrations: {
              naturalSort: true,
              paths: ['database/migrations'],
            },
          },
        },
      })
      Copied!
      • config
      • database.ts

      Or, you can enable this this on a per-query basis by adding debug(true) to the query.

      await Collection.query().where('slug', params.slug).debug(true).firstOrFail()
      Copied!

      With that set, you should see something like below in your console

      Now, unfortunately, this pretty print can't be logged to a file. You can still log the query to a file though. Within your config/logger, set the non-production logger target to a file at the destination you'd like. If that's a file in storage, it'd look something like:

      
      const loggerConfig = defineConfig({
        default: 'app',
      
        loggers: {
          app: {
            enabled: true,
            name: env.get('APP_NAME'),
            level: env.get('LOG_LEVEL'),
            transport: {
              targets: targets()
                // 👇
                .pushIf(!app.inProduction, targets.file({ destination: './storage/local.log' }))
                .pushIf(app.inProduction, targets.file({ destination: 1 }))
                .toArray(),
            },
          },
        },
      })
      Copied!
      • config
      • logger.ts

      Then, add a global listener for the query within a preload.

      node ace make:preload events
      
      import emitter from '@adonisjs/core/services/emitter'
      import logger from '@adonisjs/core/services/logger'
      
      emitter.on('db:query', function (query) {
        logger.debug(query)
      })
      Copied!
      • start
      • events.ts

      With this all your logs, including queries, will be written to the file at the location you've specified! Hope this helps!! 😊

      0

      Please sign in or sign up for free to reply

      1. Commented 7 days ago

        Thanks Tom. Thats what i am seeking for. I will find way to print those queries in log file.

        thanks

        1

        Please sign in or sign up for free to reply

        1. Commented 6 days ago

          Anytime! Okay cool, yeah updating the logger destination and logging the queries, as shown in the last two code blocks in my comment above, should get that working for ya!

          0

          Please sign in or sign up for free to reply