typed-graphqlify 完全指南：在 TypeScript 中构建类型安全 GraphQL 查询，无需代码生成

typed-graphqlify 完全指南在 TypeScript 中构建类型安全 GraphQL 查询无需代码生成【免费下载链接】typed-graphqlifyBuild Typed GraphQL Queries in TypeScript without the code generation项目地址: https://gitcode.com/gh_mirrors/ty/typed-graphqlify在 TypeScript 项目中写 GraphQL 查询时你是否厌倦了手动维护查询字符串和接口类型之间的同步typed-graphqlify 是一款优雅的开源工具它让你用 GraphQL 风格的 JavaScript 对象直接定义查询自动推导出完整的 TypeScript 类型真正做到类型安全 GraphQL 查询无需代码生成。本指南将带你从零上手掌握最快捷的配置方法与核心技巧。typed-graphqlify 是什么为何值得一试typed-graphqlify 的核心思想很简单只维护一份真相。你不必再为同一个查询同时编写 GraphQL 字符串和 TypeScript interface而是通过类似 GraphQL 的嵌套对象一次性描述查询结构库会自动帮你把对象渲染成合法的 GraphQL 查询字符串根据对象结构推导出精确的 TypeScript 返回类型让 IDE 自动补全、类型检查全程护航如果你经历过改了查询忘了改类型导致的线上事故这个库正是对症的良药。传统方式的痛点类型与查询容易脱节在使用 Apollo 等客户端时通常需要这样写interface GetUserQueryData { getUser: { id: number name: string } } const query gql query getUser { user { id name } } 问题显而易见查询与类型是两份独立代码任何一边改动另一边都可能悄然失联而 TypeScript 无法帮你发现这种错误。typed-graphqlify 正是为解决这一冗余而生。快速上手3 步完成安装配置第 1 步安装依赖npm install --save typed-graphqlify使用 Yarn 的朋友可以执行yarn add typed-graphqlify第 2 步引入核心 API第 3 步定义第一个查询见下文整个安装配置过程不到一分钟无需生成器、无需额外配置文件。核心用法用对象构建类型安全 GraphQL 查询以一个查询用户信息的例子来说明用法和写普通对象一样直观import { query, types } from typed-graphqlify const getUserQuery query(GetUser, { user: { id: types.number, name: types.string, bankAccount: { id: types.number, branch: types.optional.string, }, }, })这里的types助手用来标注字段的标量类型。调用toString()即可得到标准 GraphQL 字符串console.log(getUserQuery.toString()) // query GetUser { // user { // id // name // bankAccount { // id // branch // } // } // }而最关键的一步——获取类型——只需要引用查询对象的data属性const data: typeof getUserQuery.data await executeGraphql(getUserQuery.toString())此时data已被自动推导为精确的嵌套类型branch由于使用了types.optional.string会被识别为string | undefinedIDE 自动补全立即生效如上图所示。进阶技巧可选字段、枚举与常量可选字段types.optional.string或optional({...})让类型自动带上undefined枚举字段types.oneOf([STUDENT, TEACHER] as const)返回精确的字面量联合类型常量字段types.constant(User)适合__typename这类固定返回值带参数查询params({ format: rawString(d.m.Y) }, types.string)rawString防止字符串被误渲染成枚举字段别名alias(maleUser, user)轻松实现重命名Mutation使用mutation函数配合params传入内联参数Fragment 复用让查询更优雅typed-graphqlify 同样支持标准 Fragment 和行内 Fragmentimport { fragment, on, query, types } from typed-graphqlify const userFragment fragment(userFragment, User, { id: types.number, name: types.string, })行内片段使用on助手处理接口联合类型如 Droid / Human时还能用onUnion自动生成可辨识联合类型配合kind字段做类型收窄体验非常丝滑。为什么不用 apollo codegen你可能好奇既然有apollo client:codegen这类代码生成工具为何还要手动写对象几个关键差异简单直接typed-graphqlify 核心逻辑极简出问题容易排查修复而代码生成工具往往庞大复杂多 schema 场景Apollo codegen 对多 schema 支持不佳而 typed-graphqlify 天然无此困扰无需 schema 也能工作有些框架无法导出 schema此时 typed-graphqlify 依然游刃有余可编程构建像 AWS 控制台那样动态拼接查询时用对象构建显然更灵活React Native 兼容性说明如果你在 React Native 中使用请注意该库依赖Symbol和Map在 ES5 及更低目标环境下需要引入 polyfillimport babel-polyfill总结typed-graphqlify 用极小的学习成本换来了查询即类型的清爽体验。无论是快速原型还是长期维护的大型项目它都能帮你告别查询与类型脱节的噩梦真正把类型安全 GraphQL 查询变成一件轻松的事。感兴趣的话不妨从它的核心实现src/graphqlify.ts、src/types.ts、src/render.ts和示例代码examples/index.ts开始探索相信你会喜欢这种简洁的设计。【免费下载链接】typed-graphqlifyBuild Typed GraphQL Queries in TypeScript without the code generation项目地址: https://gitcode.com/gh_mirrors/ty/typed-graphqlify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考