How to do pagination?

[Shujee]

How are Data Loaders supposed to be used in the context of pagination? So for example, I'm using Vuetify's Server-side Data Tables, which provide support for server-side pagination, but the page variable is sent in query string rather than as a route parameter. How am I supposed to pass page=N part to my data loader?

Here is my page:

<template>
    <v-data-table-server
      v-model:page="page"
      :headers="headers" item-value="name" :items="items?.data" :items-length="items?.meta?.total??0"
      :loading="loading" @update:options="reloadMe"
    />
  </v-row>
</template>

<script lang="ts">
  //ESLint wants me to keep all imports in non-setup script block
  import { useBatchData } from '@/composables/useBatchData'
  import { AxiosErrorEx, Batch, DataTableHeader } from '@/composables/types'
  import { showConfirmKey, showSnackKey, snackTextKey } from '@/InjectionKeys'
  import { ref } from 'vue'
  import IconButtonWithTooltip from '@/components/IconButtonWithTooltip.vue'
  import useRequestHandler from '@/composables/useRequestHandler'
  export { useBatchData }
</script>

<script setup lang="ts">
  const router = useRouter()

  const page = ref<number>(1)

  const headers = ref<DataTableHeader[]>([
  ...
  ])

  const {
    data: items, 
    isLoading: loading, 
    error, 
    reload, 
  } = useBatchData()

  const reloadMe = (data: { page: number, itemsPerPage: number, sortBy: string }) => {
    //Tried this; doesn't work
    // const route = useRoute()
    // const rcopy = Object.assign({}, route)
    // route.query = { page: data.page.toString() }

    reload()
  }
</script>

and here is my Data Loader:

import useRequestHandler from '@/composables/useRequestHandler'
import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'
import { Batch, PagedResponse } from '@/composables/types'

export const useBatchData = defineBasicLoader('/batches/', async to => {
  const { get } = useRequestHandler()
  const batches = await get<PagedResponse<Batch>>('batch', {
    page: to.query.page,
  })

  return batches
})

[posva]

You handle pagination with query parameters. You can find a full working example in my talk demo

The relevant code looks like this

export const useArtworksSearchResults = defineColadaLoader(
  '/data-loaders/art-gallery/search',
  {
	// the key is needed for pinia colada but not for a basic loader
    key: (to) => [
      'artworks',
      { q: parseQuerySearch(to.query.q), page: parsePageQuery(to.query.page) },
    ],
    query: async (to) => {
      const query = parseQuerySearch(to.query.q)
      const page = parsePageQuery(to.query.page)

      if (query == null) {
        // stop the navigation
        throw new NavigationResult(false)
      }

      return searchArtworks(query, { page, limit: 25 })
    },
    staleTime: 1000 * 60 * 60, // 1 hour
    // lazy: (to, from) => to.name !== to.from
  },
)

Then you can connect the query search with a composable like vueuse's useRouteQuery():

const currentPage = useRouteQuery('page', {
  format: (v) => {
    const n = Number(v)
    return Number.isFinite(n) && n > 0 ? n : 1
  },
})
const searchQuery = useRouteQuery('q', {
  format: (v) => {
    return typeof v === 'string' ? v : ''
  },
})
const searchText = ref<string>(searchQuery.value || '')

const { data: searchResults, isLoading, error } = useArtworksSearchResults()

// const { data: images } = useArtworksImages()

function submitSearch() {
  searchQuery.value = searchText.value
  currentPage.value = 1
}

And your own pagination component.