How can I make pagination on Prisma and Nuxt3 work

31 views Asked by At

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:

  1. 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.

  2. 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

0

There are 0 answers