开发工具【免费下载链接】graphql-code-generatorA tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.项目地址https://gitcode.com/gh_mirrors/gr/graphql-code-generator点击查看免费下载导读graphql-codegen/add是 GraphQL Code Generator 生态中一个轻量但高频使用的插件它允许你在任意插件生成的输出文件中添加自定义文本——例如文件头注释、/* eslint-disable */指令、额外 import、命名空间包裹结构等。本文以该插件在仓库内的 CHANGELOG.md 为主线结合 插件源码、配置类型定义、包元信息 以及官方文档 add.mdx系统讲解它的配置项、执行机制与版本演进脉络。读完本文你将能够熟练使用add插件理解prepend / content / append三种输出位置的底层原理并掌握从旧版字符串配置迁移到对象配置的方法。一、插件定位往生成文件里“加一行”graphql-codegen/add的官方描述是 “GraphQL Code Generator plugin for adding custom content to your output file”即向代码生成器的输出文件中追加自定义内容。在 website 文档 中它的用途被明确为向输出文件添加自定义代码、import、注释等。典型应用场景包括为所有生成文件添加/* eslint-disable */或// ts-nocheck等工具指令在生成代码前插入自定义 import 语句在生成代码外围包裹declare namespace GraphQL { ... }之类的结构配合append在文件尾部闭合注入自定义标量类型、占位声明等 Hasura 场景所需的内容参见 typescript-nhost.mdx 中的用法。与其它“生成类型”的插件不同add插件不解析 Schema、不生成任何类型它只负责在最终输出文件的前、中、后三个位置插入你指定的文本。二、安装与基础用法该插件与 GraphQL Code Generator 其它插件一样通过包管理器安装即可pnpm add -D graphql-codegen/add # 或 npm install -D graphql-codegen/add在 package.json 中可以看到它依赖graphql-codegen/plugin-helpers与tslib并以graphql作为 peerDependency当前版本支持^0.8.0至^17.0.0的广泛版本范围。在codegen.ts配置文件中最简单的用法如下示例取自 add.mdximport type { CodegenConfig } from graphql-codegen/cli const config: CodegenConfig { // ... generates: { path/to/file.ts: { plugins: [ { add: { content: /* eslint-disable */ } }, typescript ] } } } export default config这里add插件先于typescript插件执行把/* eslint-disable */插入到生成文件的最顶部。由于输出内容来自content字段任何自定义 import、版权头、构建指令都可以按同样方式注入。三、配置项详解content 与 placementadd插件的配置类型定义在 src/config.ts共两个字段配置项类型默认值说明contentstring \| string[]必填要添加的实际内容可以是单条字符串或字符串数组也可以指定一个本地文件路径由 codegen 读取其内容后注入placementprepend \| content \| appendprepend内容插入到输出文件的哪个位置3.1content必填项content是必填配置。在 源码 中如果content为空插件会直接抛出错误Configuration provided for add plugin is invalid: content is missing!content支持数组形式数组中的每个元素会被按顺序视为独立的一行注入例如{ add: { content: [ // AUTO-GENERATED FILE, // Generated by graphql-code-generator, ] } }3.2placement决定插入位置placement决定内容落在输出文件的什么位置合法值由VALID_PLACEMENTS常量约束见 src/config.tsprepend默认插到文件最前面content插到文件主体内容处append插到文件末尾。placement的取值校验同样发生在插件执行时src/index.ts非法值会抛出Configuration provided for add plugin is invalid: value of placement field is not valid (valid values are: prepend, content, append)一个经典的组合用法是用prependappend把生成的代码包进命名空间里示例来自 add.mdximport type { CodegenConfig } from graphql-codegen/cli const config: CodegenConfig { // ... generates: { path/to/file.ts: { plugins: [ { add: { content: [declare namespace GraphQL {] } }, { add: { placement: append, content: } } }, typescript ] } } } export default configgraphql-modules等 preset 的配置中同样能看到content: /* eslint-disable */的注入手法可参考 guides/graphql-modules.mdx 与 presets/graphql-modules-preset.mdx。四、底层机制插件输出如何合并进最终文件add插件的核心实现非常精简src/index.ts它不产生任何实际内容而是返回一个ComplexPluginOutput结构的对象return { content: null, [placement]: Array.isArray(content) ? content : [content], };也就是说content字段插件主内容被置为null你要添加的文本被放到了prepend、content或append数组中。随后GraphQL Code Generator 的合并机制会把所有插件的输出拼接成最终文件。这一合并逻辑位于 packages/utils/plugins-helpers/src/utils.ts 的mergeOutputs函数中export function mergeOutputs(content: Types.PluginOutput | ArrayTypes.PluginOutput): string { const result: Types.ComplexPluginOutput { content: , prepend: [], append: [], }; if (Array.isArray(content)) { for (const item of content) { if (typeof item string) { result.content item; } else { result.content item.content; result.prepend.push(...(item.prepend || [])); result.append.push(...(item.append || [])); } } } return [...result.prepend, result.content, ...result.append].join(\n); }可以看到最终的输出顺序恒为prepend → content → append并且所有插件的内容会先被收集再统一拼接。这解释了add插件为什么能保证注入文本一定位于其它插件生成内容之前prepend或之后append。插件输出类型的完整定义可参考 plugins-helpers/src/types.ts。五、类型导出从入口获取 AddPluginConfig自 5.0.3 版本起插件从入口文件导出了配置类型见 CHANGELOG.md你可以在自己的项目里直接引用import type { AddPluginConfig } from graphql-codegen/add这一设计让add插件的配置可以类型安全地被复用、封装或扩展例如编写一个返回AddPluginConfig的工具函数来统一管理代码生成头注释。六、从 CHANGELOG 看版本演进关键变更与迁移指南add插件虽然功能简单但它的 CHANGELOG.md 记录了大量影响使用方式的变更以下按时间倒序列出需要开发者关注的关键点。6.1 v2.0.0配置 API 从字符串改为对象破坏性变更这是最重要的历史变更。早期版本支持直接把字符串传给插件plugins: - add: some string自 v2.0.0 起只支持对象配置字符串写法被移除必须改写为plugins: - add: content: some string迁移时只需把字符串挪到content字段下即可这正是如今所有文档与示例中add: { content: ... }写法的由来。6.2 v2.0.1修复 add 插件产生的空行问题该版本修复了 “empty lines added by add plugin” 的缺陷见 CHANGELOG.md。如果你在旧版本中遇到过生成文件头部莫名多出空行升级到 2.0.1 即可解决。6.3 v3.xESM 支持与 TypeScript 解析修复v3.1.0支持 ESMsupport ESMv3.1.1将 GraphQL 16 加入 peerDependencies并修复 react-native 项目的 exports 问题v3.2.0支持 TypeScript ESM 模块module: node16与moduleResolution: node16v3.2.1修复moduleResolution为node16/nodenext时 CommonJS TypeScript 类型解析问题。对现代工具链Vite、tsup、纯 ESM 项目而言这些修复保证了import与require两种消费方式都能获得正确的类型定义——这一点在 package.json 的exports字段中得到了体现它分别提供了requiredist/cjs与importdist/esm两套入口及对应的.d.cts/.d.ts类型声明。6.4 v5.0.3导出配置类型如前文所述入口文件开始导出AddPluginConfig类型。6.5 Node.js 版本支持的时间线破坏性变更CHANGELOG 记录了对 Node.js 版本要求的一步步收紧版本变更内容v3.0.0随 graphql-tools 弃用 Node 10v4.0.0移除 Node.js 12 支持v5.0.0要求 Node.js 16移除 Node 14 支持v6.0.0移除 Node 18 支持v7.0.0移除 Node 20 支持当前 package.json 中engines.node为16。升级插件版本前请先确认你的运行环境 Node 版本满足要求。6.6 依赖维护类变更v7.1.0将graphqlpeerDependency 范围扩展为^0.8.0 || ... || ^17.0.0即支持 GraphQL 17v6.0.1 / v5.0.1 / v4.0.1tslib依赖随版本逐步更新各版本同步更新graphql-codegen/plugin-helpers依赖确保插件输出类型与合并机制保持一致。七、使用建议与注意事项content必填忘记填写会直接报错且错误信息会明确指出 “content” is missing。placement默认是prepend只希望加文件头注释时无需显式声明。善用数组形式多条内容用数组组织避免把多行文本拼在单个字符串里可读性更好。包裹类场景需要包裹生成内容时配合prependappend使用且注意闭合结构如declare namespace的右花括号必须放在append。版本与 Node 兼容性升级前核对 CHANGELOG 中 Node 版本要求与 peerDependencies 的 graphql 版本范围。类型安全需要复用或封装配置时直接从graphql-codegen/add导入AddPluginConfig类型。八、继续深入相关源码与文档索引如果你希望进一步研究实现细节可以直接阅读仓库内以下文件插件入口与执行逻辑含placement校验、content校验与输出结构组装配置类型定义AddPluginConfig与VALID_PLACEMENTS包发布元信息exports、engines、peerDependencies官方文档两个可直接复制运行的 codegen.ts 示例输出合并机制mergeOutputs如何拼接prepend / content / append插件输出类型定义ComplexPluginOutput结构完整变更记录所有历史版本的破坏性变更与修复。总而言之graphql-codegen/add是一个“小插件、大作用”的实用工具配置只有content与placement两个字段但借助 codegen 统一的输出合并机制它能以极低的成本解决生成代码的文件头、尾部闭合、自定义注入等高频需求。理解它的实现与版本变迁也有助于你触类旁通地理解 GraphQL Code Generator 整个插件输出管线的设计思路。赞分享开发工具【免费下载链接】graphql-code-generatorA tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.项目地址https://gitcode.com/gh_mirrors/gr/graphql-code-generator点击查看免费下载相关推荐深入解析 graphql-codegen/graphql-modules-preset模块化 GraphQL 代码生成配置指南与版本演进深入解析 graphql codegen/graphql modules preset模块化 GraphQL 代码生成配置指南与版本演进 GraphQL C开发工具Mac Mouse Fix完全指南让普通鼠标在macOS上超越触控板体验Mac Mouse Fix完全指南让普通鼠标在macOS上超越触控板体验 你是不是也觉得在macOS上用第三方鼠标特别憋屈滚动生硬得像在砂纸上摩擦侧键完全开发工具graphql-code-generator typescript-operations 插件从操作类型生成到版本演进的深度解读graphql code generator typescript operations 插件从操作类型生成到版本演进的深度解读 本篇技术指南围绕 Graph开发工具上一篇如何快速上手Polyaxon10分钟完成你的第一个机器学习实验下一篇30天自制操作系统新手必看的常见问题与完美解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深入解析 @graphql-codegen/add：为 GraphQL Code Generator 输出文件注入自定义内容的插件及其版本演进
开发工具【免费下载链接】graphql-code-generatorA tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.项目地址https://gitcode.com/gh_mirrors/gr/graphql-code-generator点击查看免费下载导读graphql-codegen/add是 GraphQL Code Generator 生态中一个轻量但高频使用的插件它允许你在任意插件生成的输出文件中添加自定义文本——例如文件头注释、/* eslint-disable */指令、额外 import、命名空间包裹结构等。本文以该插件在仓库内的 CHANGELOG.md 为主线结合 插件源码、配置类型定义、包元信息 以及官方文档 add.mdx系统讲解它的配置项、执行机制与版本演进脉络。读完本文你将能够熟练使用add插件理解prepend / content / append三种输出位置的底层原理并掌握从旧版字符串配置迁移到对象配置的方法。一、插件定位往生成文件里“加一行”graphql-codegen/add的官方描述是 “GraphQL Code Generator plugin for adding custom content to your output file”即向代码生成器的输出文件中追加自定义内容。在 website 文档 中它的用途被明确为向输出文件添加自定义代码、import、注释等。典型应用场景包括为所有生成文件添加/* eslint-disable */或// ts-nocheck等工具指令在生成代码前插入自定义 import 语句在生成代码外围包裹declare namespace GraphQL { ... }之类的结构配合append在文件尾部闭合注入自定义标量类型、占位声明等 Hasura 场景所需的内容参见 typescript-nhost.mdx 中的用法。与其它“生成类型”的插件不同add插件不解析 Schema、不生成任何类型它只负责在最终输出文件的前、中、后三个位置插入你指定的文本。二、安装与基础用法该插件与 GraphQL Code Generator 其它插件一样通过包管理器安装即可pnpm add -D graphql-codegen/add # 或 npm install -D graphql-codegen/add在 package.json 中可以看到它依赖graphql-codegen/plugin-helpers与tslib并以graphql作为 peerDependency当前版本支持^0.8.0至^17.0.0的广泛版本范围。在codegen.ts配置文件中最简单的用法如下示例取自 add.mdximport type { CodegenConfig } from graphql-codegen/cli const config: CodegenConfig { // ... generates: { path/to/file.ts: { plugins: [ { add: { content: /* eslint-disable */ } }, typescript ] } } } export default config这里add插件先于typescript插件执行把/* eslint-disable */插入到生成文件的最顶部。由于输出内容来自content字段任何自定义 import、版权头、构建指令都可以按同样方式注入。三、配置项详解content 与 placementadd插件的配置类型定义在 src/config.ts共两个字段配置项类型默认值说明contentstring \| string[]必填要添加的实际内容可以是单条字符串或字符串数组也可以指定一个本地文件路径由 codegen 读取其内容后注入placementprepend \| content \| appendprepend内容插入到输出文件的哪个位置3.1content必填项content是必填配置。在 源码 中如果content为空插件会直接抛出错误Configuration provided for add plugin is invalid: content is missing!content支持数组形式数组中的每个元素会被按顺序视为独立的一行注入例如{ add: { content: [ // AUTO-GENERATED FILE, // Generated by graphql-code-generator, ] } }3.2placement决定插入位置placement决定内容落在输出文件的什么位置合法值由VALID_PLACEMENTS常量约束见 src/config.tsprepend默认插到文件最前面content插到文件主体内容处append插到文件末尾。placement的取值校验同样发生在插件执行时src/index.ts非法值会抛出Configuration provided for add plugin is invalid: value of placement field is not valid (valid values are: prepend, content, append)一个经典的组合用法是用prependappend把生成的代码包进命名空间里示例来自 add.mdximport type { CodegenConfig } from graphql-codegen/cli const config: CodegenConfig { // ... generates: { path/to/file.ts: { plugins: [ { add: { content: [declare namespace GraphQL {] } }, { add: { placement: append, content: } } }, typescript ] } } } export default configgraphql-modules等 preset 的配置中同样能看到content: /* eslint-disable */的注入手法可参考 guides/graphql-modules.mdx 与 presets/graphql-modules-preset.mdx。四、底层机制插件输出如何合并进最终文件add插件的核心实现非常精简src/index.ts它不产生任何实际内容而是返回一个ComplexPluginOutput结构的对象return { content: null, [placement]: Array.isArray(content) ? content : [content], };也就是说content字段插件主内容被置为null你要添加的文本被放到了prepend、content或append数组中。随后GraphQL Code Generator 的合并机制会把所有插件的输出拼接成最终文件。这一合并逻辑位于 packages/utils/plugins-helpers/src/utils.ts 的mergeOutputs函数中export function mergeOutputs(content: Types.PluginOutput | ArrayTypes.PluginOutput): string { const result: Types.ComplexPluginOutput { content: , prepend: [], append: [], }; if (Array.isArray(content)) { for (const item of content) { if (typeof item string) { result.content item; } else { result.content item.content; result.prepend.push(...(item.prepend || [])); result.append.push(...(item.append || [])); } } } return [...result.prepend, result.content, ...result.append].join(\n); }可以看到最终的输出顺序恒为prepend → content → append并且所有插件的内容会先被收集再统一拼接。这解释了add插件为什么能保证注入文本一定位于其它插件生成内容之前prepend或之后append。插件输出类型的完整定义可参考 plugins-helpers/src/types.ts。五、类型导出从入口获取 AddPluginConfig自 5.0.3 版本起插件从入口文件导出了配置类型见 CHANGELOG.md你可以在自己的项目里直接引用import type { AddPluginConfig } from graphql-codegen/add这一设计让add插件的配置可以类型安全地被复用、封装或扩展例如编写一个返回AddPluginConfig的工具函数来统一管理代码生成头注释。六、从 CHANGELOG 看版本演进关键变更与迁移指南add插件虽然功能简单但它的 CHANGELOG.md 记录了大量影响使用方式的变更以下按时间倒序列出需要开发者关注的关键点。6.1 v2.0.0配置 API 从字符串改为对象破坏性变更这是最重要的历史变更。早期版本支持直接把字符串传给插件plugins: - add: some string自 v2.0.0 起只支持对象配置字符串写法被移除必须改写为plugins: - add: content: some string迁移时只需把字符串挪到content字段下即可这正是如今所有文档与示例中add: { content: ... }写法的由来。6.2 v2.0.1修复 add 插件产生的空行问题该版本修复了 “empty lines added by add plugin” 的缺陷见 CHANGELOG.md。如果你在旧版本中遇到过生成文件头部莫名多出空行升级到 2.0.1 即可解决。6.3 v3.xESM 支持与 TypeScript 解析修复v3.1.0支持 ESMsupport ESMv3.1.1将 GraphQL 16 加入 peerDependencies并修复 react-native 项目的 exports 问题v3.2.0支持 TypeScript ESM 模块module: node16与moduleResolution: node16v3.2.1修复moduleResolution为node16/nodenext时 CommonJS TypeScript 类型解析问题。对现代工具链Vite、tsup、纯 ESM 项目而言这些修复保证了import与require两种消费方式都能获得正确的类型定义——这一点在 package.json 的exports字段中得到了体现它分别提供了requiredist/cjs与importdist/esm两套入口及对应的.d.cts/.d.ts类型声明。6.4 v5.0.3导出配置类型如前文所述入口文件开始导出AddPluginConfig类型。6.5 Node.js 版本支持的时间线破坏性变更CHANGELOG 记录了对 Node.js 版本要求的一步步收紧版本变更内容v3.0.0随 graphql-tools 弃用 Node 10v4.0.0移除 Node.js 12 支持v5.0.0要求 Node.js 16移除 Node 14 支持v6.0.0移除 Node 18 支持v7.0.0移除 Node 20 支持当前 package.json 中engines.node为16。升级插件版本前请先确认你的运行环境 Node 版本满足要求。6.6 依赖维护类变更v7.1.0将graphqlpeerDependency 范围扩展为^0.8.0 || ... || ^17.0.0即支持 GraphQL 17v6.0.1 / v5.0.1 / v4.0.1tslib依赖随版本逐步更新各版本同步更新graphql-codegen/plugin-helpers依赖确保插件输出类型与合并机制保持一致。七、使用建议与注意事项content必填忘记填写会直接报错且错误信息会明确指出 “content” is missing。placement默认是prepend只希望加文件头注释时无需显式声明。善用数组形式多条内容用数组组织避免把多行文本拼在单个字符串里可读性更好。包裹类场景需要包裹生成内容时配合prependappend使用且注意闭合结构如declare namespace的右花括号必须放在append。版本与 Node 兼容性升级前核对 CHANGELOG 中 Node 版本要求与 peerDependencies 的 graphql 版本范围。类型安全需要复用或封装配置时直接从graphql-codegen/add导入AddPluginConfig类型。八、继续深入相关源码与文档索引如果你希望进一步研究实现细节可以直接阅读仓库内以下文件插件入口与执行逻辑含placement校验、content校验与输出结构组装配置类型定义AddPluginConfig与VALID_PLACEMENTS包发布元信息exports、engines、peerDependencies官方文档两个可直接复制运行的 codegen.ts 示例输出合并机制mergeOutputs如何拼接prepend / content / append插件输出类型定义ComplexPluginOutput结构完整变更记录所有历史版本的破坏性变更与修复。总而言之graphql-codegen/add是一个“小插件、大作用”的实用工具配置只有content与placement两个字段但借助 codegen 统一的输出合并机制它能以极低的成本解决生成代码的文件头、尾部闭合、自定义注入等高频需求。理解它的实现与版本变迁也有助于你触类旁通地理解 GraphQL Code Generator 整个插件输出管线的设计思路。赞分享开发工具【免费下载链接】graphql-code-generatorA tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.项目地址https://gitcode.com/gh_mirrors/gr/graphql-code-generator点击查看免费下载相关推荐深入解析 graphql-codegen/graphql-modules-preset模块化 GraphQL 代码生成配置指南与版本演进深入解析 graphql codegen/graphql modules preset模块化 GraphQL 代码生成配置指南与版本演进 GraphQL C开发工具Mac Mouse Fix完全指南让普通鼠标在macOS上超越触控板体验Mac Mouse Fix完全指南让普通鼠标在macOS上超越触控板体验 你是不是也觉得在macOS上用第三方鼠标特别憋屈滚动生硬得像在砂纸上摩擦侧键完全开发工具graphql-code-generator typescript-operations 插件从操作类型生成到版本演进的深度解读graphql code generator typescript operations 插件从操作类型生成到版本演进的深度解读 本篇技术指南围绕 Graph开发工具上一篇如何快速上手Polyaxon10分钟完成你的第一个机器学习实验下一篇30天自制操作系统新手必看的常见问题与完美解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考