I am working on implementing cursor-based pagination for a table of posts using Next.js API Route, Prisma, and useSWRInfinite.
Currently, I am fetching the ten most recent posts with Prisma in a Next.js API Route and displaying them using useSWR, sorted by createdAt in descending order.
The goal is to utilize the useSWRInfinite hook to enable loading an additional ten posts through cursor-based pagination upon clicking a 'Load More' button. This will also include displaying the total count of posts.
Based on the documentation from SWR and Prisma, it appears that modifications are needed in the API route to handle cursors and logic adjustments in the useSWRInfinite hook to manage cursor data transfer.
Below is the code snippet:
API Route
export async function getPost(
req: NextApiRequest,
res: NextApiResponse,
session: Session
): Promise<void | NextApiResponse<AllPosts | (WithSitePost | null)>> {
// Code implementation here
}
Posts Page
const router = useRouter();
// Code implementation here