I am working on a project that involves implementing a pagination system to display a list of courses. I am using Prisma for database queries and Nuxt3 on the front-end. Here's what I'm currently doing:
On the front-end: When the user changes pages, I make an API call passing the page number as a query parameter in the URL.
On the back-end: I get the page number from the URL, calculate skip and take based on it, and pass those values to the Prisma query.
The problem I'm facing is that when I switch to page 2, the API returns the same data as page 1. I checked the API request and it seems like the page number is being passed correctly. I also checked the value of skip and take on the server and they seem to be correct.
Here's the code I'm using to fetch the courses on the server:
export default defineEventHandler(async (event) => {
const page = parseInt(typeof event.query.page === 'string' ? event.query.page : '1')
const pageSize = 12
const skip = (page - 1) * pageSize
if (user?.isManager) {
return await prisma.course.findMany({
include: {
subjects: true
},
take: pageSize,
skip
})
}
const userInfo = await prisma.user.findUnique({
where: {
id: user?.id
},
select: {
id: true,
name: true,
email: true,
groups: {
select: {
subjects: {
select: {
id: true,
name: true,
courses: {
include: {
subjects: true
}
}
}
}
}
}
}
})
const paginatedCourses = uniqueCourses.slice(skip, skip + pageSize)
return paginatedCourses
})
The data returned has 12 courses as expected, but when I try to change pages the new data is not being fetch