练习Practice
动手做Get your hands on it
练习跟着课文走 —— 每节课尾都有本课的练习。这一页是全部练习的总库，想集中刷题的时候来。 每个练习都写清了它来自哪一节，卡住了就回去看那一节。Practice follows the lessons — every lesson ends with the exercises for that lesson. This page is the whole library, for when you want to drill in one sitting. Each exercise names the lesson it came from, so you can go back when you stall.
0 / 148个做对过you got right
练习Exercises
筛出 6 个练习（共 148 个）。Showing 6 of 148.来自From npm scripts：命令到底跑了什么npm scripts: what the command actually runs · 地基 · 项目与语言Foundations · project and language
L1排顺序Order itscript 报错了，按什么顺序排查A script failed: in what order do you check things
把排查顺序排对。从最外层（还没开始跑）到最里层（你的代码）。
Put the checks in order, from the outermost layer (nothing has started yet) to the innermost one (your own code).
1读报错里的具体类型/文件/行号，判断是业务代码还是项目配置Read the exact type, file and line number in the error, and decide whether it is your code or the project config
2确认命令名和当前目录对不对（npm run 列一下）Check the command name and the current directory (run npm run to list them)
3确认 npm install 跑过、node_modules 在Check that npm install has run and node_modules exists
来自From useState：让界面跟着数据变useState: making the screen follow the data · React 考试React exam
L1排顺序Order it把一次点击的顺序排对Put the steps of one click in order
用户点了某一行的 Delete 按钮。把下面五件事按发生顺序排好。
The user clicked the Delete button on one row. Put the five things below in the order they happen.
1React 重新执行 NoteManager 函数，拿到新的 JSXReact runs the NoteManager function again and gets new JSX
2NoteItem 的 onClick 触发，调用 onDelete(note.id)The onClick of NoteItem fires and calls onDelete(note.id)
3React 对比新旧 JSX，把变化的部分写进真实 DOMReact compares the new JSX with the old one and writes only the differences into the real DOM
4NoteManager 里的 handleDelete 执行，调用 setNotes(...)handleDelete inside NoteManager runs and calls setNotes(...)
5React 记下 notes 的新值，标记这个组件需要重新渲染React records the new value of notes and marks this component for a re-render
来自From 先读题：三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests · React 考试React exam
L1排顺序Order it把上手顺序排对Put the starting steps in order
拿到这个项目，最合理的动作顺序是什么？
You just received this project. What is the most sensible order to work in?
1写代码：三个 handler 逐个实现Write the code: implement the three handlers one at a time
2npm install，然后 npx vitest run 拿到基线npm install, then npx vitest run to get a baseline
3读 NoteForm / NoteTable / NoteItem，确认它们已经完整、不用改Read NoteForm / NoteTable / NoteItem and confirm they are already complete and need no change
4读 README + 读测试文件，抄下所有验收标准Read the README and the test file, and write down every acceptance criterion
5npx vitest run 验证，再 npm run dev 手动点一遍Verify with npx vitest run, then npm run dev and click through it by hand
6读 types/Note.ts，确认数据形状和 id 的类型Read types/Note.ts to confirm the shape of the data and the type of id
来自From resolver 的四个参数The four arguments of a resolver · Federation 考试Federation exam
L1排顺序Order it把 resolver 的调用顺序排对Put the resolver calls in the right order
客户端发 { orders(userId:"123") { id shippingInfo { status } } }， 数据源里 user 123 有两个订单。把服务端的动作排序。
The client sends { orders(userId:"123") { id shippingInfo { status } } }, and in the data source user 123 has two orders. Put the server's steps in order.
1对每个 order 分别调 Order.shippingInfo（共 2 次）Call Order.shippingInfo once per order (2 calls in total)
2用 schema 校验查询：字段存不存在、userId 类型对不对Validate the query against the schema: do the fields exist, is the type of userId right
3DataLoader 把 2 次 load 合并成 1 次批量请求DataLoader merges the 2 load calls into 1 batched request
4调 Query.orders，拿到 [order-456, order-457]Call Query.orders and get back [order-456, order-457]
5按查询形状组装 JSON 返回Assemble the JSON response in the shape of the query
来自From 先读题：四个 TODO、三处埋雷、十个测试Read the task first: four TODOs, three planted bugs, ten tests · Federation 考试Federation exam
L1排顺序Order it把 Task 1 的推进顺序排对Put the steps of Task 1 in the right order
拿到 node-subgraph，最合理的动作顺序？
You have just opened node-subgraph. What is the most sensible order to work in?
1逐个实现四个 TODOImplement the four TODOs one by one
2读 schema.graphql，记下四个返回类型的可空性Read schema.graphql and note the nullability of the four return types
3npm install，然后 npm test 拿到 6 failed / 4 passed 的基线npm install, then npm test to get the 6 failed / 4 passed baseline
4npm test 转绿，再写个 verify 脚本查 _service 和 _entitiesOnce npm test is green, write a verify script that checks _service and _entities
5读 index.js 和 dataSources，抄下 context 键名与方法名Read index.js and the dataSources, and copy out the context keys and method names
6修三处埋雷Fix the three planted bugs
来自From 用一个 state 管四个页面Controlling four pages with one piece of state · Cab BookingCab Booking
L1排顺序Order it把一次完整预订的六步排好Put the six steps of one full booking in order
从点「Book a Cab」到历史里出现记录，中间发生了什么？按顺序排。What happens between pressing “Book a Cab” and the record appearing in the history? Put the steps in order.
1setCurrentPage("cab-options")
2updateBookedCabDetails(cab) —— 写 Context 的两个 stateupdateBookedCabDetails(cab) — writes both states in the Context
3setCurrentPage("loading")
4Loading 的 useEffect 里 setTimeout 1000ms 到期The setTimeout of 1000ms inside the useEffect of Loading fires
5onComplete() → setCurrentPage("cab-confirmation")
6onConfirm() → setCurrentPage("home")，首页读到新的 rideHistoryonConfirm() → setCurrentPage("home"), and the home page reads the new rideHistory