【免费下载链接】howtographqlThe Fullstack Tutorial for GraphQL项目地址https://gitcode.com/gh_mirrors/ho/howtographql点击查看免费下载本篇基于 HowToGraphQL 全栈教程中 TypeScript 教程线Fastify graphql-helix的章节 5-a-simple-mutation.md完整讲解如何在一个已能运行的 GraphQL 服务器上添加第一个 mutation先扩展 SDL schema 定义再实现postresolver含args参数详解最后通过 GraphiQL 实测mutation { post }并验证数据写入。读完后你能独立为 GraphQL API 增加写操作并理解 mutation 与 query 在执行层面的顺序差异以及内存存储的局限。章节定位在已有服务上追加写操作在动手之前先回顾这个教程线中项目的技术栈与当前进度见 2-getting-started.md 与 3-graphql-server.md项目使用graphqlGraphQL 引擎graphql-tools/schema的makeExecutableSchema把 SDL 与 resolvers 胶合成可执行 schemaHTTP 层由fastify提供graphql-helix负责把入站请求归一化并跑完整执行管线parse、validate、变量解析、execute并在GET /graphql上提供浏览器内可用的 GraphiQL 界面数据层此时只有内存数组一个links常量数组预置了一条id为link-0的Link。本章要做的事很小但很典型让客户端能够post发布一条新Link到服务器。整个流程延续上一节 4-a-simple-query.md 确立的两步法schema-first 开发扩展 GraphQL schema 定义加入新的根字段以及新对象类型如需要为新增字段实现对应的 resolver 函数。说明下文代码块中引用的hackernews-node-ts/src/schema.graphql、hackernews-node-ts/src/schema.ts等路径是教程配套项目HackerNews 克隆中的文件位置本仓库作为 Gatsby 站点只承载教程内容本身读者按章节在项目目录下维护同名文件即可。扩展 schema 定义加入 Mutation 根类型GraphQL schema 有三个根类型Query、Mutation、Subscription分别对应三种操作类型。此前项目中只有Query类型现在需要新增Mutation类型并声明post操作。在项目src/schema.graphql中将 schema 更新为如下完整内容type Query { info: String! feed: [Link!]! } type Mutation { post(url: String!, description: String!): Link! } type Link { id: ID! description: String! url: String! }几个值得注意的类型声明细节post字段声明了两个入参url: String!和description: String!均为非空标量。这是 schema 层面的契约客户端调用post时这两个参数必填缺失会在 validate 阶段被拒返回类型Link!表示该操作永远返回一个非空Link对象对比 2-getting-started.md 中对User!与User返回类型差异的讨论因此 resolver 必须保证有返回值客户端查询post的字段时selection set 至少需要选取Link的一个子字段如id这是对象类型查询的硬性规则。由于项目通过graphql-import-node直接import typeDefs from ./schema.graphql修改 SDL 后无需额外同步步骤makeExecutableSchema在启动时就会读取到新的类型定义。实现 post resolver 与 args 参数第二步是更新src/schema.ts中的 resolvers。原文档给出的完整实现如下type Link { id: string; url: string; description: string; } const links: Link[] [{ id: link-0, url: www.howtographql.com, description: Fullstack tutorial for GraphQL }] const resolvers { Query: { info: () This is the API of a Hackernews Clone, feed: () links, }, Link: { id: (parent: Link) parent.id, description: (parent: Link) parent.description, url: (parent: Link) parent.url, }, Mutation: { post: (parent: unknown, args: { description: string, url: string }) { // 1 let idCount links.length; // 2 const link: Link { id: link-${idCount}, description: args.description, url: args.url, }; links.push(link); return link; }, }, };为什么删掉 Link 的琐碎 resolver 后依然能工作对照上一节可以看到本章实际上完全移除了显式的Link类型 resolver上面代码块中虽然列出了原文指出它们属于可省略的琐碎模式——逐字段parent parent.id这种。原因是 GraphQL 引擎的默认字段读取行为default field resolver当某个字段没有显式 resolver 时引擎会直接以字段名为键从parent对象上取值。由于feedresolver 返回的Link对象字段名与 schema 字段名一一对应id、url、description省略显式 resolver 后行为完全一致。这也是本文档在结尾特意点名的简化手法——只有在需要跨数据源取值、鉴权或派生计算时才需要写非平凡 resolver。resolver 的第二个参数argspostresolver 的签名揭示了 GraphQL resolver 函数约定的一部分。resolver 函数最多接收四个入参parent、args、context、info本章只用到前两个第一个参数parent或称root上一层 resolver 的执行结果。对根字段而言它没有实际意义本文档标注为unknown对Link子字段而言它是列表中当前那条 link 对象执行层级机制见 4-a-simple-query.md 的解析流程第二个参数args携带本次操作的入参——即客户端在post(url: ..., description: ...)中传入的值。此前info和feed的 resolver 用不到它是因为这两个根字段在 schema 中没有声明任何参数一旦字段声明了参数引擎就会把它们整理成args对象传入。post resolver 内部的三步逻辑let idCount links.length用一个极其初级的整型计数作为唯一 ID 生成器——当前数组长度即下一个序号因此新 link 的 id 依次为link-1、link-2、link-3……构造新的link对象id采用link-${idCount}模板自增后置description与url直接取自argslinks.push(link)写入内存数组最后return link满足Link!非空返回的契约客户端即可在 mutation 的 selection set 中选取刚创建对象的字段。从源码结构看links是模块级单例数组feed与post共享同一引用因此 mutation 写入后再次执行feed查询即可看到新数据——这正是下一步验证的依据。在 GraphiQL 中测试 mutation重启服务器npm run dev或npm run start后打开http://localhost:3000/graphql的 GraphiQL 界面发送如下 mutationmutation { post(url: www.prisma.io, description: Prisma replaces traditional ORMs) { id } }服务器返回{ data: { post: { id: link-1 } } }每发送一次该 mutationidCount基数就抬高一次后续创建的 link id 依次为link-2、link-3以此类推。如果你不想依赖浏览器 UI也可以沿用 3-graphql-server.md 中介绍的curl方式直接向POST /graphql端点发请求把 body 中的 query 换成上面的 mutation 文本即可curl -X POST http://localhost:3000/graphql -H Content-type: application/json --data-raw {query: mutation { post(url: \www.prisma.io\, description: \Prisma replaces traditional ORMs\) { id } }}用 feed 查询验证写入成功再次发送上一节的feed查询query { feed { id url description } }此时返回结果中会多出刚才用 mutation 创建的那条Link证明post确实写入了共享的links数组。执行顺序辨析mutation 与 query 到底谁串行谁并行本章 front matter 中附带了一道章节测验question/answers/correctAnswer字段由站点自身渲染成答题交互Gatsby 站点在 src/templates/Tutorials.tsx 中把这三个 front matter 字段读出并传给 Quiz 组件答对后解锁下一章。题目是What is a distinction between execution of queries and mutation?四个选项中 front matter 指定的正确答案correctAnswer: 2即第三个选项是Mutation run in series and queries run in parallelmutation 串行执行query 并行执行。这一结论背后的机制是同一请求内的 query 字段彼此独立引擎可以并行调度它们的 resolver而 mutation 字段之间可能存在数据依赖例如先创建用户、再修改该用户引擎按声明顺序串行执行 mutation 字段以保证写入顺序确定。本文档的post恰好只有一个 mutation 字段因此感受不到这一区别但当你后续添加更多 mutation 操作时应将其牢记。局限性与下一步从内存走向持久化重启服务器后会发现之前创建的 link 全部消失——因为links数组只存在于进程内存中进程生命周期结束即数据清空。这正是教程刻意保留的教学断点在 6-adding-a-database.md 中你将引入 Prisma SQLite用prisma link.create替换links.push让 mutation 的数据持久化到磁盘其中Link模型的id改为Int id default(autoincrement())由数据库而非idCount变量负责 ID 生成。在 7-connecting-server-and-database.md 中再把 Prisma Client 接回 resolver随后是认证8-authentication.md与订阅9-subscriptions.md。本章要点回顾添加写操作的标准流程SDL 中新增Mutation根类型与字段含参数与非空返回类型声明→ 实现同名 resolver两步缺一不可resolver 的第二个参数args承载字段入参schema 中声明的参数名会原样出现在该对象上字段名与对象属性名一致时琐碎的逐字段 resolver 可安全省略依赖引擎默认取值行为mutation 字段在引擎中串行执行、query 字段并行执行多写操作并存时需注意顺序依赖本阶段的idCount计数与内存数组只是教学过渡真实场景应由数据库如 Prisma autoincrement承担唯一 ID 与持久化职责。相关资源本章教程原文5-a-simple-mutation.md前置章节2-getting-started.mdmakeExecutableSchema 与执行管线、3-graphql-server.mdFastify graphql-helix 服务与 GraphiQL、4-a-simple-query.mdfeed 查询与 parent 执行层级后续章节6-adding-a-database.mdPrisma SQLite 持久化站点答题交互实现src/templates/Tutorials.tsx、src/components/Quiz/Quiz.tsx赞分享【免费下载链接】howtographqlThe Fullstack Tutorial for GraphQL项目地址https://gitcode.com/gh_mirrors/ho/howtographql点击查看免费下载相关推荐GraphQL-Nexus 实战教程编写第一个 GraphQL SchemaGraphQL Nexus 实战教程编写第一个 GraphQL Schema 还在为 GraphQL Schema 的繁琐定义而烦恼吗还在手动维护 SDLHowToGraphQL TypeScript 教程实战用 graphql-tools/schema 构建并本地执行第一个 GraphQL SchemaHowToGraphQL TypeScript 教程实战用 graphql tools/schema 构建并本地执行第一个 GraphQL Schema 本在 Node.js TypeScript GraphQL 服务器中实现第一个 feed 查询Schema、Resolver 与查询解析流程在 Node.js TypeScript GraphQL 服务器中实现第一个 feed 查询Schema、Resolver 与查询解析流程 本篇指南基于上一篇3分钟解决Dio嵌套JSON解析难题json_serializable实战指南下一篇Pinpoint OkHttp 插件使用指南配置详解、版本支持与插桩原理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考