Ready to get started?

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

robot mascot smiling

Querying & Listing Sortable Course Modules

@tomgobich
Published by
@tomgobich
In This Lesson

We'll query and add a sortable list of a course's modules on the courses show page.

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

Join the Discussion 4 comments

Create a free account to join in on the discussion
  1. @rajeeb-shakya

    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
    1. Responding to rajeeb-shakya
      @tomgobich

      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
      Copied!
      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
      1. Responding to tomgobich
        @rajeeb-shakya

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

        thanks

        1
        1. Responding to rajeeb-shakya
          @tomgobich

          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