GraphQL联系人应用编辑条目时误新增记录如何解决

• 当前代码所有提交操作硬编码调用创建类mutationcreateInteressent，没有区分新增、编辑两种场景的接口调用逻辑，这是编辑时生成全新条目的根本原因。
• key值生成逻辑没有适配场景：不管是新增还是编辑，都用实时时间戳拼接生成全新key，没有复用原有条目的历史key，哪怕后续接入更新接口，也会因为key不匹配找不到目标记录。
• 页面虽然已经通过node.id判断编辑/新增状态来切换弹窗标题，但提交逻辑完全没有使用这个判断标识。

1. 按场景拆分key值生成规则 #

数据库要求key非空且唯一，所以针对两种场景做差异化处理：

• 新增场景：继续沿用你原来的「Vorname + Name + 时间戳」规则生成新的唯一key，避免同名用户重复录入的冲突。
• 编辑场景：直接复用当前条目原有存储的key值，不要重新生成带实时时间的新key。
  实现逻辑示例：

// 判定是否为编辑模式：存在条目id即为编辑场景
const isEditMode = !!node?.id;
// 按场景取值
const key = isEditMode 
  ? node.key // 编辑时直接取原条目的key，不重新生成
  : `${Vorname}${Name}${new Date().toLocaleString()}`;

注意：需要确保后端查询联系人列表的接口，会把每条记录的key字段随列表数据一起返回，这样编辑时才能从传入的node参数中读取到原key值，避免key为空触发数据库错误。

2. 新增更新操作对应的GraphQL mutation #

当前你只定义了创建接口SUBMIT_POST，需要对应补充更新接口的mutation，和创建接口的字段结构保持一致，把操作方法从createInteressent替换为后端定义的更新方法（比如updateInteressent）：

const UPDATE_POST = gql`
mutation (
  $key: String!, 
  $id: ID!,
  $Namegql: String,
  $Vornamegql: String,
  $Quellegql: String,
  $Artikelgql: String,
  $Landgql: String,
  $Ortgql: String,
  $Telgql: String,
  $Mobilgql: String,
  $EMailgql: String,
  $Whatsappgql: Boolean,
  $Telegramgql: Boolean,
  $Notizengql: String,
  $Geschlechtgql: String,
){
  updateInteressent(
    parentId: 1266, 
    id: $id,
    key: $key, 
    published: true, 
    input: {
      Name: $Namegql,
      Vorname: $Vornamegql,
      Quelle: $Quellegql,
      Artikel: $Artikelgql,
      Land: $Landgql,
      Ort: $Ortgql,
      Tel: $Telgql,
      Mobil: $Mobilgql,
      EMail: $EMailgql,
      Whatsapp: $Whatsappgql,
      Telegram: $Telegramgql,
      Notizen: $Notizengql,
      Geschlecht: $Geschlechtgql,
  }) {
    success
    message
  }
}
`;

3. 提交逻辑按场景选择对应接口 #

修改原来的client.mutate调用逻辑，根据编辑状态选择对应接口，不再固定传创建mutation：

await client.mutate({
  variables: { 
    key, 
    id: node.id, // 编辑时需要传入原条目id用于定位
    Namegql: Name,
    Vornamegql: Vorname,
    Quellegql: Quelle,
    Artikelgql: Artikel,
    Landgql: Land,
    Ortgql: Ort,
    Telgql: Tel,
    Mobilgql: Mobil,
    EMailgql: EMail,
    Whatsappgql: Whatsapp,
    Telegramgql: Telegram,
    Notizengql: Notizen,
    Geschlechtgql: Geschlecht
  },
  // 编辑模式调用更新接口，新增模式调用创建接口
  mutation: isEditMode ? UPDATE_POST : SUBMIT_POST,
  refetchQueries: () => [{ query: GET_POSTS }],
});

• 删掉原有代码里冗余传入的input变量，这个变量没有在GraphQL的入参定义里声明，属于无效传值。
• 生成key的时间戳可以替换为毫秒级的时间戳（new Date().getTime()），避免同一秒快速提交时出现key重复的问题。
• 编辑场景下完全不需要修改原条目对应的key值，直接复用即可，避免不必要的字段变动。

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