React+Apollo+Prisma项目deleteIssueGroup突变未被识别问题

问题背景 #

基于React、Apollo、Prisma、Next.js和TypeStack（TypeGraphQL+TypeDI）开发的应用中，后端已定义deleteIssueGroup突变，但GraphQL Codegen生成的graphql.tsx仅包含MutationDeleteGroupArgs类型，未生成对应的useDeleteIssueGroupMutation Hook，前端使用时提示该突变不存在。其余如createIssueGroup突变、各类查询均能正常生成对应代码。

排查与解决步骤 #

1. 验证后端GraphQL Schema是否包含目标突变 #

• 启动后端服务，访问GraphQL Playground（通常为http://localhost:3000/api/graphql），查看Schema中的Mutation类型是否存在deleteIssueGroup字段。
• 若Playground中无该字段，说明IssueGroupResolver未被正确注册到TypeGraphQL的Schema生成逻辑中。检查Schema初始化代码，确认已导入并添加该Resolver。

2. 修正GraphQL Codegen配置 #

• 确保codegen.yml中正确配置schema来源：可以是后端的GraphQL端点，也可以是本地生成的Schema文件，示例配置如下：

  schema: "http://localhost:3000/api/graphql"
  documents:
    - "src/components/**/*.{ts,tsx}"
    - "src/lib/**/*.{ts,tsx}"
    - "src/pages/**/*.{ts,tsx}"
  generates:
    src/generated/graphql.tsx:
      plugins:
        - "typescript"
        - "typescript-operations"
        - "typescript-react-apollo"
  

• 恢复原有的documents配置，无需添加!(*.types)排除规则，避免漏掉包含突变定义的文件。

3. 前端添加deleteIssueGroup的GraphQL操作文档 #

GraphQL Codegen仅根据前端编写的GraphQL操作文档生成Hook，需在前端代码中定义对应的突变查询，示例：

mutation DeleteIssueGroup($id: String!) {
  deleteIssueGroup(id: $id) {
    id
    title
  }
}

将这段代码添加到组件或专用的GraphQL文档文件中，确保Codegen能扫描到。

4. 清理缓存并重新执行代码生成 #

• 删除已生成的src/generated/graphql.tsx文件，清除缓存残留。
• 重新运行yarn graphql-codegen，查看终端日志，确认是否扫描到deleteIssueGroup突变，且无报错信息。

5. 检查后端Resolver与模型定义 #

• 确认IssueGroupResolver中的deleteIssueGroup方法的@Mutation装饰器拼写正确，返回类型与定义一致（此处应为IssueGroup）。
• 检查IssueGroup模型的TypeGraphQL定义，确保所有需要暴露的字段都添加了@Field装饰器，避免Schema生成异常。

内容的提问来源于stack exchange，提问作者Mel