如何在Apollo GraphQL mutation中动态传递多组对象数组参数

解决方案 #

步骤1：修改GraphQL Mutation定义，新增动态数组变量 #

首先在mutation的入参声明里加上filterMetas对应的变量，类型要和你的Schema里定义的filterMetas输入项数组类型完全匹配，替换原来硬编码的数组部分：

mutation createData(
  $userId: Int!, 
  $Content: String, 
  $Title: String,
  # 新增动态数组变量，类型需和服务端Schema定义的输入类型一致
  $FilterMetas: [FilterMetaInput!]!
) {
    createData(
      input: {
        content: $Content
        filterMetas: $FilterMetas
        meta: { title: $Title }
      }
      userId: $userId
    ) {
      id
      name
  }
}

注意：上面的FilterMetaInput需要替换为你服务端Schema中定义的、对应filterMetas单条数据的输入类型名称，如果数组允许为空可以把末尾的!去掉。枚举值比如INFO在传参时直接传字符串"INFO"即可，Apollo会自动做类型转换。

步骤2：React调用时传入动态生成的filterMetas数组 #

直接把用户输入收集到的filterMetas对象数组放到variables参数里即可：

// 这里的filterMetas是你从用户输入收集到的动态数组，示例格式如下：
const userInputFilterMetas = [
  { categoryName: "用户选的分类1", categoryId: "1", categoryType: "INFO" },
  { categoryName: "用户选的分类2", categoryId: "2", categoryType: "INFO" },
  // 更多用户输入的项...
]

CreateData({
   variables: {
     Content: content,
     Title: title,
     FilterMetas: userInputFilterMetas
   },
   context: { clientName: API_CLIENT },
});

修改完成后不管用户输入多少组filterMetas对象，都可以直接通过变量传入，不需要硬编码。

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