需安装GraphQL扩展、配置Schema文件、用Codegen生成TS类型、启用内联检查，并可选集成Apollo Client类型推导。
如果您在VSCode中编写GraphQL查询时希望获得类似TypeScript的类型检查与自动补全能力，则可能是由于缺少对GraphQL Schema的静态类型绑定与语言服务支持。以下是为GraphQL查询添加类型安全的具体操作步骤：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装GraphQL for VSCode扩展
该扩展提供GraphQL语法高亮、Schema验证、字段自动补全及错误实时提示功能，是实现类型安全的基础依赖。
1、打开VSCode，点击左侧活动栏的扩展图标（或按快捷键Ctrl+Shift+X）。
2、在搜索框中输入GraphQL，找到由Prisma官方维护的扩展（名称为“GraphQL for VSCode”，作者显示为“GraphQL”）。
3、点击“安装”按钮，安装完成后重启VSCode。
二、配置本地GraphQL Schema文件
类型检查的前提是VSCode能访问到目标GraphQL服务的完整Schema定义，可通过SDL文件（schema.graphql）或 introspection JSON 文件提供。
1、在项目根目录下创建schema.graphql文件，内容为服务端导出的完整Schema SDL文本。
2、在项目根目录下新建.graphqlrc配置文件，写入以下内容：
schema: ./schema.graphql
documents: ./src/**/*.graphql
三、使用GraphQL Codegen生成类型定义
通过代码生成器将Schema和查询文档转换为TypeScript接口，使query变量与响应数据具备编译期类型约束。
1、在项目中执行命令：npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-query。
2、运行npx graphql-codegen init，按向导选择TypeScript、React Query、schema.graphql路径及查询文件位置。
3、生成后，所有.graphql文件旁将自动产出对应的*.graphql.ts类型文件。
四、启用VSCode的GraphQL内联类型检查
在编辑器中直接查看查询字段是否符合Schema定义，并在非法字段或缺失必需参数时标红提示。
1、确保当前工作区已打开包含.graphqlrc的文件夹。
2、在任意.graphql文件中输入query关键字，等待几秒，观察字段列表是否基于schema.graphql动态加载。
3、手动触发校验：右键单击编辑器空白处，选择“GraphQL: Validate Document”。
五、集成Apollo Client类型推导（可选）
当项目使用Apollo Client时，可借助其typePolicies与TypedDocumentNode增强运行时类型一致性。
1、安装依赖：npm install @apollo/client graphql。
2、在调用useQuery的地方，将导入的查询文档显式标注为TypedDocumentNode类型。
3、在apolloClient配置中启用addTypename: true以确保响应包含__typename字段，支撑联合类型判别。
