GraphQL+Prisma环境下Delete Mutation生成与调用问题求助

一、生成useDeleteIssueMutation Hook #

1. 确保GraphQL Schema包含deleteIssue定义 #

先确认项目已生成包含deleteIssue Mutation的GraphQL Schema文件（通常为schema.graphql），@graphql-codegen依赖该文件生成hooks。若用type-graphql，需在服务入口文件（如src/server.ts）中生成并导出Schema：

import { buildSchema, printSchema } from "type-graphql";
import IssueResolver from "./resolvers/issue.resolver";
import fs from "fs/promises";

async function bootstrap() {
  const schema = await buildSchema({
    resolvers: [IssueResolver],
  });
  // 将Schema写入本地文件，供codegen读取
  await fs.writeFile("./schema.graphql", printSchema(schema));
  // ... 后续启动服务器逻辑
}

执行启动代码后，打开schema.graphql确认存在如下内容：

type Mutation {
  createIssue(data: IssueInput!): Issue!
  deleteIssue(id: String!): Issue!
}

2. 检查GraphQL Codegen配置 #

确认codegen.ts（或codegen.yml）配置正确，包含生成React Query hooks的预设。示例配置：

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: "./schema.graphql",
  documents: "./src/**/*.graphql", // 指向项目中所有GraphQL查询文件
  generates: {
    "./lib/graphql/": {
      preset: "client",
      presetConfig: {
        reactQueryVersion: "v4", // 匹配你使用的React Query版本
      },
    },
  },
};

export default config;

3. 重新运行代码生成命令 #

在终端执行代码生成指令（通常为npm run codegen或yarn codegen），执行完成后检查lib/graphql/index.ts，确认useDeleteIssueMutation已被导出。

二、实现正确的删除调用逻辑 #

当useDeleteIssueMutation可正常导入后，替换原fetch调用，用生成的Hook实现删除逻辑：

import { useDeleteIssueMutation, useAllIssuesQuery } from "lib/graphql";
import { toast } from "@/components/ui/toast"; // 替换为你的toast组件路径

// 组件内部逻辑
const { refetch: refetchIssues } = useAllIssuesQuery();
const [deleteIssue] = useDeleteIssueMutation();

const handleDelete = async (id: string) => {
  try {
    await deleteIssue({ variables: { id } });
    toast({ title: "Issue deleted" });
    // 刷新列表数据
    await refetchIssues();
    // 若需刷新其他数据，如refetchClimate，在此调用
    // await refetchClimate();
  } catch (error) {
    toast({ 
      title: "删除失败", 
      description: "无法删除该Issue", 
      variant: "destructive" 
    });
    console.error("删除Issue出错:", error);
  }
};

// 使用示例：<IssueList onDelete={handleDelete} />

关键注意点 #

• 确保deleteIssue的参数名与Resolver中@Arg("id")一致，这里传{ id }即可。
• 用try/catch捕获错误，避免删除失败导致页面无响应。
• 调用refetchIssues刷新列表，保证UI与后端数据同步。

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