如何在React.js中编写GraphQL关联表的mutation查询

报错原因 #

你当前写法的核心问题是：关联表字段（member、activity）不能直接传递字符串名称值，大多数GraphQL服务要求关联字段传递关联记录的唯一ID，或者使用对应框架规定的关联操作语法。

场景1：关联的member、activity记录已存在，仅需关联报名关系

这是最常见的活动报名场景，你需要用对应服务要求的关联语法传递ID，主流框架的写法参考：

• 如果你用的是Hasura：

mutation {
  createActivityEnrollments(objects: {
    member_id: "已存在的member记录ID",
    activity_id: "已存在的activity记录ID"
  }) {
    id
    activity {
      name
    }
    member {
      name
    }
  }
}

• 如果你用的是Prisma：

mutation {
  createActivityEnrollment(data: {
    member: { connect: { id: "已存在的member记录ID" } },
    activity: { connect: { id: "已存在的activity记录ID" } }
  }) {
    id
    activity {
      name
    }
    member {
      name
    }
  }
}

• 如果你用的是Strapi：

mutation {
  createActivityEnrollment(data: {
    member: "已存在的member记录ID",
    activity: "已存在的activity记录ID"
  }) {
    data {
      id
      attributes {
        activity {
          data {
            attributes {
              name
            }
          }
        }
        member {
          data {
            attributes {
              name
            }
          }
        }
      }
    }
  }
}

场景2：需要同时创建member/activity记录和报名关联关系

使用嵌套创建语法即可，以Prisma为例的写法参考：

mutation {
  createActivityEnrollment(data: {
    member: { create: { name: "member1" } },
    activity: { create: { name: "Activity 1" } }
  }) {
    id
    activity {
      name
    }
    member {
      name
    }
  }
}

排查建议 #

如果以上写法都不适用，直接查看你所用GraphQL服务的突变文档（Mutation Docs），文档里会明确标注createActivityEnrollments接口的data参数字段类型，按照指定的字段结构传参即可。

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