How to paginate with DTOs?

Hey Aaron!

Yeah, adding a fromPaginator would be one way to do it! If you're using the @adocasts.com/dto package, that method will be baked into the DTO already. If you're not using this package, but taking a similar approach, you're welcome to grab the SimplePaginatorDto from there and add it into your DTO or BaseDto.

const page = request.input('page', 1)
const paginator = await User.query().orderBy('username', 'asc').paginate(page, 10)

paginator.baseUrl(router.makeUrl('users.index'))

const users = UserDto.fromPaginator(paginator, { 
  start: paginator.firstPage,
  end: paginator.lastPage,
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
app
controllers
users_controller.ts

<script setup lang="ts">
import type { SimplePaginatorDtoContract } from '@adcasts.com/dto/types'
import type { UserDto } from '#dtos/user'

const props = defineProps({
  users: SimplePaginatorDtoContract<UserDto>
})

const arrayOfUsers = props.users.data
const paginationInfo = props.users.meta
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

By adding the start and end it'll populate a users.meta.pagesInRange array similar to the getUrlsForRange would.

Alternatively, you can split them and just use the SimplePaginatorMetaKeys type, it should match the serialize meta. That'd look something like the below. However, with this, you'd need to build the paginated URLs on the client-side or pass it in separately.

import { SimplePaginatorMetaKeys } from '@adonisjs/lucid/types/querybuilder'

// ...

const page = request.input('page', 1)
const paginator = await User.query().orderBy('username', 'asc').paginate(page, 10)

paginator.baseUrl(router.makeUrl('users.index'))

return inertia.render('admin/users/index', {
  users: UserDto.fromArray(paginator.all()),
  meta: paginator.getMeta() as SimplePaginatorMetaKeys,
  pagesInRange: paginator.getUrlsForRange(paginator.firstPage, paginator.lastPage)
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  
app
controllers
users_controller.ts

If needed in multiple places you could also wrap that into a DTO of its own using generics, that would look something relatively similar to the SimplePaginatorDto, though.

Next, you might have a DTO that looks something like the below, where you're just simply returning objects. For that, you can just tack a fromPaginator method on there that results in a similar, typed, structure to the paginator. Something similar to the below seems to be the general approach that is recommended by others. I work a lot with C#, which is why my approach to DTOs is a little more… descriptive lol.

import { SimplePaginatorMetaKeys } from '@adonisjs/lucid/types/querybuilder'

export default class UserDto {
  static fromModel(user: User) {
    return {
      id: user.id,
      username: user.username,
      // ...
    }
  }

  static fromArray(users: User[]) {
    return users.map((user) => this.fromModel(user))
  }

  static fromPaginator(paginator: ModelPaginatorContract<User>) {
    return {
      data: this.fromArray(paginator.all()),
      meta: paginator.getMeta() as SimplePaginatorMetaKeys
    }
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Lastly, as a heads up, AdonisJS 7 will be introducing HTTP Transformers as a serialization handler to improve end-to-end type safety. Doesn't solve anything for you at the moment, but just wanted to share so you're aware of it in the event you think you might want to transition from DTOs to those in the future.

If you'd like more help, feel free to share your UserDto and we can try to find a good solution!