Replies: 1 comment
-
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 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. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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 passpage=N
part to my data loader?Here is my page:
and here is my Data Loader:
Beta Was this translation helpful? Give feedback.
All reactions