Mandarin Duck
Mandarin Duck
NNuxt
Created by Mandarin Duck on 4/16/2025 in #❓・help
Problem in doing paginations between 2 composables
Hi, so I am making 2 composables usePaginations.ts
export const usePaginations = () => {
const perPage = ref<number>(8)
const totalItems = ref<number>(0)

const currentPage = ref(0)
const cursorNextPage = ref<string | null>(null)
const cursorPrevPage = ref<string | null>(null)
const cursor = ref<string | null>(null)
const hasNextPage = ref<boolean>(false)
const hasPreviousPage = ref<boolean>(false)
const isForward = ref(true)
const totalCount = ref(0)

const updateFromPaginator = (e: any) => {
e.page > currentPage.value ? nextPage() : prevPage()
}

// Go to the next page using the new cursor
const nextPage = (): void => {
isForward.value = true
if (hasNextPage.value && cursorNextPage.value) {
cursor.value = cursorNextPage.value
currentPage.value++
}
}

// Go to the previous page by removing the last cursor and updating the current one
const prevPage = (): void => {
isForward.value = false
if (hasPreviousPage.value && cursorPrevPage.value) {
nextTick(() => {
cursor.value = cursorPrevPage.value
currentPage.value--
})
}
}

// Reset pagination (clear cursor history)
const resetPagination = (): void => {
cursor.value = null
}

return {
perPage,
totalItems,
cursor,
cursorNextPage,
cursorPrevPage,
hasNextPage,
hasPreviousPage,
resetPagination,
updateFromPaginator,
isForward,
totalCount
}
}
export const usePaginations = () => {
const perPage = ref<number>(8)
const totalItems = ref<number>(0)

const currentPage = ref(0)
const cursorNextPage = ref<string | null>(null)
const cursorPrevPage = ref<string | null>(null)
const cursor = ref<string | null>(null)
const hasNextPage = ref<boolean>(false)
const hasPreviousPage = ref<boolean>(false)
const isForward = ref(true)
const totalCount = ref(0)

const updateFromPaginator = (e: any) => {
e.page > currentPage.value ? nextPage() : prevPage()
}

// Go to the next page using the new cursor
const nextPage = (): void => {
isForward.value = true
if (hasNextPage.value && cursorNextPage.value) {
cursor.value = cursorNextPage.value
currentPage.value++
}
}

// Go to the previous page by removing the last cursor and updating the current one
const prevPage = (): void => {
isForward.value = false
if (hasPreviousPage.value && cursorPrevPage.value) {
nextTick(() => {
cursor.value = cursorPrevPage.value
currentPage.value--
})
}
}

// Reset pagination (clear cursor history)
const resetPagination = (): void => {
cursor.value = null
}

return {
perPage,
totalItems,
cursor,
cursorNextPage,
cursorPrevPage,
hasNextPage,
hasPreviousPage,
resetPagination,
updateFromPaginator,
isForward,
totalCount
}
}
` So the problem is that the computed variables has logger and it logged with correct variables object but actually the query passed empty object and this is only happens when prevPage is invoked. nextPage works beautifully. Helps, appreciated. Thank you.
6 replies