RedwoodJS 博客分页实战：从 GraphQL 服务端到 Cell 前端组件的完整实现指南

后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载导读本文基于 RedwoodJS 官方教程的延伸内容讲解如何在一个 RedwoodJS 博客应用中实现基于页码的经典分页offset 分页API 侧通过 GraphQL SDL 暴露postPage查询、在 Service 中用 Prisma 的take/skip按页取数并返回总数Web 侧通过 Cell 发起带page变量的查询借助路由把 URL 查询字符串?page2自动注入页面组件 props最后用routes.home({ page })生成可点击的页码导航。读完本文你将掌握一条完整、可复制的SDL → Service → Cell → 路由参数 → 分页组件全链路实现方案并了解其底层机制在 RedwoodJS 源码中的真实落点。本文内容以 docs/versioned_docs/version-7.x/how-to/pagination.md 为主干并结合当前仓库7.x 版本线的 router、Cell 实现源码进行深度佐证。前置准备在教程项目上继续开发本文是 官方教程 的延续假定你已经拥有一个按照教程搭建好的 RedwoodJS 博客项目包含Post模型、postsservice、BlogPostsCell与HomePage。由于分页通常只有在数据量较大时才有意义正式开始前请先为博客多创建一些文章。本文约定每页显示 5 篇文章因此至少创建 6 篇以便看到第 2 页的效果。说明当前文档version-7.x中的代码示例以 JavaScript 为主仓库内较新版本线 docs/docs/how-to/pagination.md 提供了 JavaScript / TypeScript 双版本标签页写法仅在文件扩展名与类型标注上有差异逻辑完全一致。第一步在 API 侧定义分页查询的 SDL分页的第一处改动位于 GraphQL SDL 文件api/src/graphql/posts.sdl.js。除了已有的posts、post(id)查询外我们新增一个postPage查询它接收一个可选的page参数返回一个PostPage类型。PostPage包含两部分posts当前页的文章列表[Post!]!非空数组、元素非空count文章总数Int!供前端计算总页数、生成页码。export const schema gql # ... type PostPage { posts: [Post!]! count: Int! } type Query { postPage(page: Int): PostPage posts: [Post!]! post(id: Int!): Post! } # ... 注意page被刻意声明为可选参数page: Int而非page: Int!。这样做的目的是当调用方不传page时Service 端可以默认返回第一页避免前端每次都要显式带上page1。第二步在 Service 中实现分页 Resolver接下来为postPage编写 resolver位置在api/src/services/posts/posts.js。实现要点用一个常量POSTS_PER_PAGE统一管理每页条数本文取 5通过(page - 1) * POSTS_PER_PAGE计算skip跳过条数用 Prisma 的findMany配合take取几条与skip跳过几条完成数据库层面的分页并按createdAt倒序保证分页顺序稳定用db.post.count()返回总数供前端渲染页码。const POSTS_PER_PAGE 5 export const postPage ({ page 1 }) { const offset (page - 1) * POSTS_PER_PAGE return { posts: db.post.findMany({ take: POSTS_PER_PAGE, skip: offset, orderBy: { createdAt: desc }, }), count: db.post.count(), } }这里利用了 JavaScript 的解构默认值语法{ page 1 }即使 GraphQL 请求未携带pageresolver 也会安全地回退到第 1 页与 SDL 中page可选的设计呼应。findMany返回的是 PromiseGraphQL 层会自动 await 解析count()同理二者可并行执行前端拿到的是一个形如{ posts: [...], count: 12 }的聚合结果。这是一种先按页取数、再查总数的经典 offset 分页方案。对 Prisma 而言take/skip是驱动级的分页能力与数据库方言无关当数据量极大时可进一步考虑基于游标cursor的方案本文不展开。至此 API 侧已经完成客户端可以通过 GraphQL底层由 RedwoodJS 集成的 Apollo Client 发起请求拿到指定页的文章数据。第三步更新 Cell 的 GraphQL 查询API 就绪后转到 Web 侧。首页的文章列表由BlogPostsCell组件负责查询与渲染因此先更新它的QUERY。export const QUERY gql query BlogPostsQuery($page: Int) { postPage(page: $page) { posts { id title body createdAt } count } } 与原来直接查询posts不同现在查询的是postPage并把count一并取回。$page是可选的查询变量与 SDL 定义保持一致。同时同文件中的Success组件需要适配新的返回结构——数据不再直接是数组而是{ posts, count }对象export const Success ({ postPage }) { return postPage.posts.map((post) BlogPost key{post.id} post{post} /) }第四步让page参数魔法般流入页面组件现在的问题是如何把页码传给 Cell。这里用到 RedwoodJS 路由的一个特性URL 查询字符串中的键值对会被自动解析为页面组件的 props。回顾教程中的路径参数Route path/blog-post/{id:Int} page{BlogPostPage} nameblogPost /会把 URL 路径中的{id:Int}以idprop 传给BlogPostPage。查询字符串走的是同一套机制而且不需要修改任何路由定义。更新HomePage接收pageprop 并透传给BlogPostsCellconst HomePage ({ page 1 }) { return ( BlogLayout BlogPostsCell page{page} / /BlogLayout ) }其效果是当用户访问https://awesomeredwoodjsblog.com?page2时HomePage的pageprop 会被设为字符串2随后原样传给BlogPostsCell若 URL 中没有?page则默认取1。底层机制源码佐证这一魔法并非黑盒它由 RedwoodJS Router 的 URL 解析逻辑实现。在 packages/router/src/router.tsx#L136-L137 中路由器通过parseSearch(location.search)把当前 URL 的查询字符串解析为键值对再与路径参数合并为allParams最终作为 props 传入被渲染的页面组件const searchParams parseSearch(location.search) const allParams { ...searchParams, ...pathParams }而parseSearch的实现在 packages/router/src/util.ts#L213-L230它借助URLSearchParams把?key1val1key2val2这类字符串转换为{ key1: val1, key2: val2 }对象。因此查询字符串中的值天然是字符串类型——这正解释了为什么下一步需要beforeQuery来做类型转换。第五步用beforeQuery把字符串页码转成数字查询字符串传递过来的page是字符串如2而 GraphQL 变量要求Int类型。在 Cell 中这个问题通过beforeQuery钩子解决它在查询真正发起之前执行负责把组件 props 加工成查询变量。export const beforeQuery ({ page }) { page page ? parseInt(page, 10) : 1 return { variables: { page } } }逻辑很直白若page有值则用parseInt(page, 10)解析为十进制整数否则回退为1最终以{ variables: { page } }的形式返回交由 Apollo Client 作为查询变量发送。Cell 生命周期中的位置源码佐证beforeQuery是 RedwoodJS Cell 的标准导出之一。在 packages/web/src/components/cell/createCell.tsx#L28-L39 中可以看到其默认实现——默认情况下直接把组件 props 当作查询变量并附加fetchPolicy: cache-and-network先读缓存、同时发起网络请求与notifyOnNetworkStatusChange: true而在 packages/web/src/components/cell/createCell.tsx#L53-L54 中beforeQuery(variables)的返回值会被作为 options 传给useQuery从而决定实际发送的 variables。类型定义位于 packages/web/src/components/cell/cellTypes.ts#L139-L200beforeQuery的作用被明确注释为 Parsepropsinto query variables把 props 解析为查询变量。仓库中的测试 packages/web/src/components/cell/createCell.test.tsx#L460-L487 也验证了这一行为Cell 可以自定义beforeQuery覆盖变量最终useQuery收到的options.variables即为beforeQuery的返回结果。第六步本地运行验证分页效果在项目根目录执行yarn rw devRedwoodJS 开发服务器默认运行在8910 端口访问http://localhost:8910应当只看到前 5 篇文章把 URL 改为http://localhost:8910?page2应当看到第 6 篇及之后的文章若总共只有 6 篇则第 2 页只有 1 篇。注意此时尚需手动修改 URL 才能切换页面——接下来就来实现可视化的页码导航组件。第七步生成并实现Pagination分页组件用 RedwoodJS CLI 生成组件骨架yarn rw g component Pagination然后编写组件逻辑import { Link, routes } from redwoodjs/router const POSTS_PER_PAGE 5 const Pagination ({ count }) { const items [] for (let i 0; i Math.ceil(count / POSTS_PER_PAGE); i) { items.push( li key{i} Link to{routes.home({ page: i 1 })} {i 1} /Link /li ) } return ( h2Pagination/h2 ul{items}/ul / ) } export default Pagination组件接收count文章总数通过Math.ceil(count / POSTS_PER_PAGE)计算总页数循环生成从 1 到总页数的页码链接。每个链接用命名路由函数routes.home({ page: i 1 })生成带查询参数的 URL配合redwoodjs/router导出的Link组件完成客户端跳转。命名路由如何生成?page源码佐证routes.home这类命名路由函数由 packages/router/src/analyzeRoutes.ts#L147-L149 在路由分析阶段动态注册本质上是调用replaceParams(path, args)。其实现位于 packages/router/src/util.ts#L290-L324先替换路径中命名的参数如{id:Int}然后把未在路径中使用且值非undefined/null的额外参数自动追加为 URL 查询字符串// 取未用于路径的参数名 const extraArgKeys Object.keys(args) .filter((x) !paramNames.includes(x)) .filter((x) args[x] ! undefined args[x] ! null) // 追加为 search params if (extraArgKeys.length) { const extraArgs Object.fromEntries( extraArgKeys.map((key) [key, ${args[key]}]), ) path ?${new URLSearchParams(extraArgs).toString()} }因此routes.home({ page: 2 })会生成/?page2。仓库测试 packages/router/src/tests/util.test.ts#L390-L394 明确验证了这一行为replaceParams(/extra, { foo: foo })得到/extra?foofoopackages/router/src/tests/util.test.ts#L435-L458 还验证了查询参数会被URLSearchParams正确编码如空格编码为、特殊字符百分号转义并跳过undefined/null值。遵循官方教程一贯不加 CSS的风格这里未引入任何样式。若想让分页更美观只需简单两步去掉列表的项目符号list-style: none、把列表改为横向排列如display: flex。第八步把分页组件接入 Cell最后把Pagination挂到文章列表末尾。先在文件顶部导入import Pagination from src/components/Pagination然后更新Success组件渲染文章列表的同时把postPage.count传给Pagination。export const Success ({ postPage }) { return ( {postPage.posts.map((post) BlogPost key{post.id} post{post} /)} Pagination count{postPage.count} / / ) }至此一个完整的五篇一页分页博客就实现了首页默认展示第 1 页底部出现页码导航点击任意页码即可跳转到对应页面。已知局限与改进方向当前实现足够教学与中小型博客使用但存在一个明显的技术局限它没有优雅地处理页数非常多的情况。页码列表是线性的——若有 100 页就会渲染出 100 个数字链接既难看也不可用。可以将其作为读者的练习任务进行增强常见思路包括页码窗口window只渲染当前页附近的页码如当前页 ± 2首尾用省略号…表示首尾页与上/下一页补充第一页 / 上一页 / 下一页 / 最后一页导航按钮并在边界禁用当前页高亮对比routes.home({ page })生成的 URL 与当前 location为当前页码标记aria-current或样式类提升可访问性防御性输入在beforeQuery中对page做范围钳制如小于 1 时取 1、大于总页数时取最后一页避免越界请求。实现分页组件时若需要读取当前页码以做高亮可以借助redwoodjs/router提供的useLocation等 hooks相关实现在 packages/router/src 目录下可查。小结本文走完了 RedwoodJS 分页实现的完整链路SDL在Query类型上新增可选的page参数与PostPage { posts, count }返回类型Service用 Prisma 的take/skip按页取数用count()返回总数默认页码为 1Cell更新QUERY携带$page变量用beforeQuery把字符串页码解析为数字路由查询字符串?page被 Router 自动解析为页面组件 prop见 packages/router/src/router.tsx#L136-L137分页组件基于count与每页条数计算总页数用routes.home({ page })生成带查询参数的链接底层是 packages/router/src/util.ts#L290-L324 的replaceParams。这套URL 查询字符串驱动页码 命名路由生成链接 Cell 变量管道的组合拳正是 RedwoodJS 全栈框架中前后端数据流协作的一个典型范例也展示了如何在不改动路由配置的前提下利用框架约定快速实现通用功能。赞分享后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载相关推荐RedwoodJS 分页实战从 GraphQL 服务端到前端 Pagination 组件的完整实现指南RedwoodJS 分页实战从 GraphQL 服务端到前端 Pagination 组件的完整实现指南 本指南以 RedwoodJS 官方教程博客项目为基础后端前端Web框架开发工具RedwoodJS 分页实战从 GraphQL 查询到前端分页组件的完整实现RedwoodJS 分页实战从 GraphQL 查询到前端分页组件的完整实现 本篇技术指南基于 RedwoodJS 官方文档 docs/docs/how to后端前端Web框架开发工具在 RedwoodJS 博客中实现分页从 GraphQL SDL、Prisma 解析器到翻页组件完整实战在 RedwoodJS 博客中实现分页从 GraphQL SDL、Prisma 解析器到翻页组件完整实战 本篇技术指南以 RedwoodJS 官方教程Tut后端前端Web框架开发工具上一篇styled-components React Native 端 CSS attr() 函数支持从 Props 到类型化样式值的完整指南下一篇如何彻底解决TranslucentTB启动失败VCLibs依赖完整修复指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考