GraphQL创建PostgreSQL数据库条目无响应问题排查求助

1. 确认表单提交逻辑是否触发 #

• 在onSubmit函数最顶部添加console.log("提交逻辑触发")，点击按钮后查看控制台是否输出。如果无输出，说明表单未提交：
  • 检查提交按钮的type="submit"是否正确，是否存在其他元素阻止了表单默认提交行为
  • 检查自定义Form组件的实现，是否正确绑定了onSubmit事件，有没有意外调用preventDefault且未处理后续逻辑
  • 检查按钮的isDisabled条件：form.formState.isSubmitting || !form.formState.isDirty，如果表单未修改（isDirty为false），按钮会处于禁用状态，点击无效。可临时移除!form.formState.isDirty测试。

2. 检查表单验证是否通过 #

• 如果onSubmit中的console.log(data)无输出，说明Yup验证未通过。可添加错误日志排查：

  console.log("表单错误：", form.formState.errors);
  

• 重点排查issueCategory字段：你的Select组件泛型第二个参数为true（表示多选），但注释了isMulti属性，导致组件返回单个值，但类型期望是数组，直接触发验证失败。需二选一：
  • 取消注释isMulti，改为多选模式
  • 将泛型第二个参数改为false，匹配单选行为

3. 检查Apollo Mutation执行情况 #

• 给createIssue添加错误捕获，Apollo默认不会将mutation错误抛出到全局，需手动处理：

  const onSubmit = (data: IssueInput) => {
    console.log(data);
    return form.handler(async () => {
      try {
        const result = await createIssue({ 
          variables: { data: { ...data, userId: me?.id || ""} } 
        });
        console.log("Mutation结果：", result);
      } catch (err) {
        console.error("Mutation错误：", err);
        toast({
          title: "创建失败",
          description: err.message,
          status: "error",
        });
      }
    }, {
      onSuccess: async () => {
        // 原有成功逻辑
      },
    });
  };
  

• 检查Apollo客户端配置，确保已正确连接GraphQL服务器，可开启开发者工具：在ApolloClient配置中添加connectToDevTools: true，通过Apollo Devtools查看mutation是否发送。

4. 验证后端GraphQL服务 #

• 直接在GraphQL Playground中执行CreateIssue mutation，确认后端是否能正常创建数据：

  mutation {
    createIssue(data: { 
      title: "测试标题", 
      issueCategory: "测试分类", 
      description: "测试描述", 
      userId: "你的用户ID" 
    }) {
      id
    }
  }
  

• 如果Playground执行失败，需检查：
  • PostgreSQL数据库权限是否正常
  • issue表结构是否与IssueInput定义一致
  • 后端createIssue resolver是否存在逻辑错误或吞掉错误的情况

5. 排查自定义form.handler的实现 #

• 自定义useForm的handler方法可能存在逻辑问题，比如未正确执行传入的异步函数或未处理Promise结果。可临时绕过form.handler直接测试：

  const onSubmit = async (data: IssueInput) => {
    console.log(data);
    try {
      await createIssue({ 
        variables: { data: { ...data, userId: me?.id || ""} } 
      });
      toast({
        title: "Issue创建成功",
        description: "你的问题已提交",
        status: "success",
      });
      refetch();
      form.reset();
    } catch (err) {
      console.error(err);
    }
  };
  

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