
教程【免费下载链接】ru-test-assignmentsТестовые задания для самостоятельного выполнения от разных it компаний项目地址https://gitcode.com/gh_mirrors/ru/ru-test-assignments点击查看免费下载导读本文围绕开源仓库 ru-test-assignments 收录的 AppBooster 前端测试任务 frontend-graphql.md 展开以一份真实招聘测试题为骨架讲解如何用 React 对接 GitHub GraphQL API从零实现一个可在浏览器中查询仓库、浏览 open issues、并为其添加评论的 SPAIssue 管理器。读完本文你将掌握 GitHub GraphQL 的查询query与变更mutation核心用法、前端数据层设计、错误处理与工程化交付的完整套路可直接用于完成该测试任务或同类 GraphQL 前端项目。任务解读这道题到底在考什么原文档的完整要求如下引自 frontend/appbooster/frontend-graphql.md创建一个使用 GitHub GraphQL API 的 single page application。应用是一个用于管理 GitHub issues 的管理器。 起始界面需要选择/输入仓库。选定后向用户展示该仓库中所有打开的 issues标题、文本、评论数量。同时应为 issue 提供添加评论的能力。 必须使用 React 和 GitHub GraphQL API可以使用任何第三方库。 期望带项目描述与启动步骤的 README、美观易用的界面、恰当的错误处理。拆解这份需求核心交付物有三个功能点仓库输入与解析起始界面让用户输入或选择owner/repo应用据此定位目标仓库open issues 列表展示该仓库全部开放 issue 的标题、正文文本和评论数注意数量来自聚合字段而非拉取全部评论评论写入对任意 issue 执行添加评论操作属于写操作mutation。从 AppBooster 的招聘画像看该公司在仓库中还发布了 前端货币转换任务、后端 AB 测试系统任务这家公司专注移动端与 Web 应用研发测试题普遍要求可运行的完整应用 良好的工程习惯本题则额外强调GraphQL 客户端能力——这是与用 REST 拉 issues类题目例如仓库内 incode-group/github-kanban-test-task.md的关键区别。技术选型React 之外的自由裁量原文档限定React GitHub GraphQL API其余全部放开。推荐的选型组合及其理由层面可选方案建议框架ReactHooks 风格必须建议函数组件 HooksGraphQL 客户端Apollo Client / urql / RelayApollo Client 生态最成熟社区资料最多状态管理Redux Toolkit / Zustand / Context本任务状态量小Context 局部 state 即可避免过度设计UI 库Ant Design / MUI / Tailwind可显著降低界面美观评分成本路由React Router可选单页应用也可不用路由构建工具Vite / CRA / Next.jsVite 启动快适合快速交付需要说明仓库中不含该任务的可运行实现frontend/devjs/react-test.md 等同类题目文档中也只是将 Apollo Client 列为参考工具因此上述选型属于推荐搭配并非仓库内可验证的实现事实。选型的原则是凡是自己熟悉的、能稳定运行的就是好选型因为评审关注的是功能完整、代码可读、能跑起来。GitHub GraphQL API 基础认证与端点认证方式GitHub GraphQL API 的端点是https://api.github.com/graphql与 REST 不同它只接受 POST 请求认证通过请求头传递Authorization: Bearer tokentoken 可以是Personal Access TokenPAT在 GitHub 账户设置中生成需勾选repo或public_reposcope 才能读取仓库内容若只读公开仓库可考虑更细粒度的 scopeOAuth App / GitHub App token更接近真实产品形态适合展示面向真实用户的产品思维。本地开发时 token 的安全处理一个常见坑是把 token 硬编码进前端代码或提交到仓库。建议的开发期做法使用.env.local存放 token构建时经import.meta.env或process.env注入在.gitignore中忽略该文件若用 Vite环境变量需以VITE_前缀命名才会暴露给客户端如VITE_GITHUB_TOKEN。限流与批量获取GraphQL 的限流按点数points而非请求次数计算点数由查询复杂度决定公开文档中默认的每小时点数限额具体数值以 GitHub 官方文档为准。这正是鼓励你用单次查询聚合多条数据的原因一次 query 拿回所有需要的字段既减少往返也降低点数消耗。核心查询设计一个 Query 拿回全部列表数据GitHub GraphQL 的Query根类型提供了repository(owner:, name:)字段返回Repository对象。查询 open issues 的典型写法如下query RepositoryIssues($owner: String!, $name: String!, $cursor: String) { repository(owner: $owner, name: $name) { nameWithOwner issues( first: 20 states: [OPEN] after: $cursor orderBy: { field: CREATED_AT, direction: DESC } ) { totalCount pageInfo { endCursor hasNextPage } nodes { id title body comments { totalCount } } } } }逐字段说明repository(owner:, name:)按仓库全名定位仓库owner 与 name 需从用户输入解析例如输入facebook/react则 ownerfacebook、namereactissues(first:, states: [OPEN])只取开放状态的 issuefirst控制每页数量配合after游标与pageInfo实现加载更多式分页orderBy按创建时间倒序让最新 issue 排在最前comments { totalCount }这是展示评论数量的正确姿势——只取聚合计数不实际拉取评论列表数据量极小、响应更快idissue 的全局节点 ID后续 addComment mutation 需要它作为subjectId。对应到任务要求标题、文本、评论数量分别映射为title、body、comments.totalCount一条查询即可全部覆盖。仓库搜索的另一种思路如果想让起始界面更可选而不是只靠手输可以用search查询实现仓库联想搜索query SearchRepos($q: String!) { search(query: $q, type: REPOSITORY, first: 10) { nodes { ... on Repository { nameWithOwner description } } } }search的查询语法与 GitHub 网页搜索一致如org:facebook language:js可作为加分项但它会引入额外点数消耗也可省略仅保留文本框输入owner/repo的兜底方案。写入操作addComment Mutation添加评论是本题唯一要求的三项功能之一必须用 mutation 实现。GitHub GraphQL 的addCommentmutation 签名如下mutation AddComment($subjectId: ID!, $body: String!) { addComment(input: { subjectId: $subjectId, body: $body }) { commentEdge { node { id body } } } }要点subjectId指向被评论对象issue、PR 等的全局节点 ID就是查询阶段拿到的id字段如果前端没有保存该 ID将无法提交评论——所以列表节点必须包含idbody评论正文GitHub 会按 Markdown 渲染mutation 必须经 GraphQL 客户端以POST发送到同一端点携带同样的Authorization: Bearer头使用 Apollo Client 时提交后通常还要通过refetchQueries或更新本地缓存让评论数即时刷新避免页面数据与服务器不同步。前端架构与组件划分参考仓库内其他任务文档如 frontend/incode-group/github-kanban-test-task.md 同样以 GitHub issues 为核心数据一个清晰、易评审的组件结构大致如下src/ ├── api/ # GraphQL query/mutation 定义与客户端封装 │ ├── client.js │ ├── queries.js │ └── mutations.js ├── components/ │ ├── RepoPicker/ # 起始界面仓库输入/搜索 │ ├── IssueList/ # open issues 列表标题、正文、评论数 │ └── IssueItem/ # 单条 issue 卡片 评论表单 ├── hooks/ # 数据获取与状态管理 Hooks ├── utils/ # owner/name 解析等纯函数 └── App.jsx设计原则纯函数解耦把owner/repo字符串解析、输入校验如正则^[\w.-]\/[\w.-]$放在utils中方便单测数据层独立GraphQL 语句集中管理组件不直接拼字符串组件单一职责RepoPicker 只管选仓库IssueList 只管列表与分页IssueItem 只管单条展示与评论交互。评论数刷新策略提交评论成功后推荐三种刷新方案由简到繁refetchQueries重新执行列表查询——实现最简单适合数据量小读取并改写 Apollo 缓存中的totalCount——无网络往返即时更新乐观更新optimistic response——先改 UI 再同步服务器体验最好但要小心错误回滚。错误处理与加载状态评分重点之一原文档的期望里明确列了адекватная обработка ошибок恰当的错误处理这是本题最容易被忽略却最影响体验的部分。至少覆盖以下场景场景期望表现仓库不存在 / 无权访问明确提示仓库未找到或无权限不崩溃token 无效或过期提示重新配置 tokenGraphQL 返回 errors 数组解析并展示首个可读错误消息网络异常提供重试按钮提交评论失败保留用户输入避免数据丢失加载中骨架屏或 loading 指示器避免空白闪烁在 Apollo Client 中query/mutation 的返回对象通常同时包含data、loading、error三个字段逐一处理即可。错误信息要面向用户友好展示例如请检查仓库名是否正确同时保留技术细节输出到控制台方便排查。工程化交付README 与运行步骤原文档明确要求带项目描述与启动步骤的 README。参考仓库 README.md 的惯例——它是任务描述集合而非实现真正实现时建议你的 README 包含# 项目名 一句话描述基于 React GitHub GraphQL API 的 Issues 管理器。 ## 功能 - 输入 owner/repo 加载仓库 - 列出全部 open issues标题、正文、评论数 - 为 issue 添加评论 ## 运行步骤 1. npm install 2. 在 .env.local 配置 VITE_GITHUB_TOKEN 3. npm run dev 4. 打开 http://localhost:5173 ## 技术栈 React · Apollo Client · Vite · Ant Design ## 脚本 - npm run dev / npm run build / npm run test / npm run lint可复现是 README 的第一价值任何评审者按你的文档三步之内能跑起来比炫技重要得多。建议追加的工程项测试为owner/name解析、评论表单、错误分支写单元测试Vitest React Testing Librarymock GraphQL 响应Apollo Client 提供MockedProvider便于测试Lint/FormatESLint Prettier保持代码风格统一可部署若有余力把应用部署到静态托管GitHub Pages、Vercel 等并在 README 附上线上地址——注意 token 只放在前端就意味着任何访问者都能看到它的值所以线上版本要么用 OAuth 流程要么接受仅本地演示的限制这一点要在 README 中如实说明。与仓库内同类任务的横向参照本仓库还收录了几道与本题高度相关的任务可作思路参照frontend/incode-group/github-kanban-test-task.md同样是输入仓库 URL → 加载 issues但要求以看板三列呈现并支持拖拽适合对比学习 issues 数据在不同交互形态下的组织方式frontend/vestberry/test-assignment.md该项目自带一个 Express GraphQL 后端可参考前后端分离 GraphQL 层的项目结构frontend/devjs/react-test.md在参考链接中明确推荐 Apollo Client印证了 GraphQL 前端的主流选型方向frontend/appbooster/frontend.mdAppBooster 的另一道前端题货币转换可与本题对照看出该公司对完整可运行 界面 工程规范的一致期待。结语一份可执行的交付清单完成本任务前对照以下清单自查React GitHub GraphQL API非 REST实现三大功能选仓库、列 open issues标题/正文/评论数、加评论GraphQL 查询含comments { totalCount }聚合字段数据组织高效错误处理覆盖仓库不存在、token 失效、网络异常、评论失败等场景加载状态loading有明确 UI 反馈README 含项目描述、功能列表与可复现的启动步骤代码结构清晰数据层/组件层分离token 未硬编码进源码可选加分搜索联想、分页/加载更多、单元测试、线上部署地址这道题的核心价值不在调通 API而在于展示你如何用 GraphQL 的思维组织前端数据单次查询聚合所需字段、用节点 ID 驱动写入操作、用聚合计数替代冗余数据拉取。把这套能力沉淀下来就是一次高质量的 GraphQL 前端实战演练。赞分享教程【免费下载链接】ru-test-assignmentsТестовые задания для самостоятельного выполнения от разных it компаний项目地址https://gitcode.com/gh_mirrors/ru/ru-test-assignments点击查看免费下载相关推荐构建GraphQL服务Javalin GraphQL Java实战构建GraphQL服务Javalin GraphQL Java实战 你还在为RESTful API的过度获取和端点爆炸问题困扰吗本文将带你使用轻量级Ja后端Web框架使用SST构建无服务器Apollo GraphQL API实战指南使用SST构建无服务器Apollo GraphQL API实战指南 前言 在现代应用开发中GraphQL因其灵活性和高效性已成为API设计的重要选择。本文将介graphql-yoga Hackernews 示例实战用 GraphQL Yoga Prisma 从零构建完整 GraphQL APIgraphql yoga Hackernews 示例实战用 GraphQL Yoga Prisma 从零构建完整 GraphQL API examples后端API设计上一篇MonSter深度解析一站式掌握立体视觉领域的革命性突破下一篇攻克Realm并发难题3步实现线程安全的数据操作创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考