React表单提交字符串数组至Prisma及关联字段可空问题

1. 修正Prisma模型配置 #

确保IssueGroup的关联数组允许空，同时双向关联的Issue字段设为可选：

model IssueGroup {
  id    Int     @id @default(autoincrement())
  name  String
  issues Issue[] // 数组类型默认允许空，创建时可无需关联Issue
}

model Issue {
  id           Int          @id @default(autoincrement())
  title        String
  issueGroupId Int?         // 设为可选，允许Issue独立存在
  issueGroup   IssueGroup?  @relation(fields: [issueGroupId], references: [id])
}

修改后运行prisma migrate dev同步数据库结构。

2. 调整GraphQL输入类型 #

移除输入类型中issues字段的强制非空约束，允许提交时不传该字段：

input CreateIssueGroupInput {
  name: String!
  issues: [CreateIssueInput!] // 去掉数组末尾的!，该字段变为可选
}

input CreateIssueInput {
  title: String!
  // 其他Issue字段...
}

3. 修复React表单的类型与初始化问题 #

• 对齐表单数据类型与GraphQL输入类型，避免类型不匹配：

// 表单数据类型，和GraphQL输入结构一致
type CreateIssueGroupFormData = {
  name: string;
  issues: Array<{ title: string }>;
};

// 初始值设为空数组而非null，解决初始化错误
const initialFormData: CreateIssueGroupFormData = {
  name: '',
  issues: [],
};

• 提交表单时处理空数组场景，避免触发非空校验：

const [createIssueGroup] = useMutation(CREATE_ISSUE_GROUP_MUTATION);

const handleSubmit = async (data: CreateIssueGroupFormData) => {
  try {
    await createIssueGroup({
      variables: {
        input: {
          name: data.name,
          // 空数组时不传该字段，或直接传空数组（根据Resolver逻辑调整）
          ...(data.issues.length > 0 && { issues: data.issues }),
        },
      },
    });
  } catch (err) {
    console.error('创建IssueGroup失败:', err);
  }
};

4. 调整GraphQL Resolver逻辑 #

确保创建IssueGroup时，未传issues时不强制关联，避免Prisma报错：

async createIssueGroup(_, { input }, { prisma }) {
  const { name, issues } = input;
  return prisma.issueGroup.create({
    data: {
      name,
      // 仅当issues存在时才创建关联数据
      ...(issues && {
        issues: { create: issues },
      }),
    },
    include: { issues: true }, // 按需返回关联的Issue列表
  });
}

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