如何在Next.js API路由、Prisma和useSWRInfinite中使用基于光标的分页

Question

我正在尝试使用Next.js API路由、Prisma和useSWRInfinite将基于光标的分页添加到帖子表中。

目前，我使用带有Next.js API路由的Prisma来获取带有useSWR的网站的十篇最新帖子，按createdAt降序排序。

我想使用useSWRInfinite挂钩来访问API端点，并显示"加载更多"按钮，以使用基于光标的分页来加载另外十个帖子，此外还显示帖子总数的计数。

正如我从SWR和Prisma文档中了解到的，API路由将需要修改以接受一个游标并返回下一个游标。useSWRInfinite钩子还需要一些逻辑来发送/接收当前/下一个游标。

这是代码：

API路线

export async function getPost(
req: NextApiRequest,
res: NextApiResponse,
session: Session
): Promise<void | NextApiResponse<AllPosts | (WithSitePost | null)>> {
const { postId, siteId, published } = req.query;
if (
Array.isArray(postId) ||
Array.isArray(siteId) ||
Array.isArray(published)
)
return res.status(400).end("Bad request. Query parameters are not valid.");
if (!session.user.id)
return res.status(500).end("Server failed to get session user ID");
try {
if (postId) {
const post = await prisma.post.findFirst({
...
});
return res.status(200).json(post);
}
const site = await prisma.site.findFirst({
where: {
id: siteId,
user: {
id: session.user.id,
},
},
});
const posts = !site
? []
: await prisma.post.findMany({
take: 10,
where: {
site: {
id: siteId,
},
published: JSON.parse(published || "true"),
},
orderBy: {
createdAt: "desc",
},
});
return res.status(200).json({
posts,
site,
});
} catch (error) {
console.error(error);
return res.status(500).end(error);
}
}

文章页面

const router = useRouter();
const { id: siteId } = router.query;
const { data } = useSWR<SitePostData>(
siteId && `/api/post?siteId=${siteId}&published=true`,
fetcher,
{
onSuccess: (data) => !data?.site && router.push("/"),
}
);

Answer 1

看看Prisma关于基于光标的分页的文档：https://www.prisma.io/docs/concepts/components/prisma-client/pagination#cursor-基于分页

您可以提供skip属性来跳过findMany查询中的X元素，和/或提供cursor属性来告诉Prisma从哪里开始查找。您将需要两者：skip: 1用于跳过光标，cursor用于指示查找开始的属性的ID。