将对象数组添加到 apollo-react 中的突变

IT技术 reactjs graphql apollo graphcool
2021-05-17 23:11:24

我在前端使用 react-apollo，在后端使用 graphcool。我有一个突变，它创建了一个像这样的教程：

const CREATE_TUTORIAL_MUTATION = gql`
  mutation CreateTutorialMutation(
    $author: String
    $link: String
    $title: String!
    $postedById: ID!
    $completed: Boolean!
  ) {
    createTutorial(
      author: $author
      link: $link
      title: $title
      postedById: $postedById
      completed: $completed
    ) {
      author
      link
      title
      postedBy {
        id
        name
      }
      completed
    }
  }
`

它在像这样的提交处理程序中被调用......

this.props.createTutorialMutation({
      variables: {
        author,
        link,
        title,
        completed: false,
        postedById
      }
    })

一切都很好。

现在我想在创建新教程时添加一组标签。我创建了输入字段并将其连接起来，以便 tags 变量是一个对象数组，每个对象都有一个标签id和标签text。

如果我尝试将标签字段添加到突变中，它需要一个标量类型。但是对于对象数组似乎没有标量类型。

如果我在调用突变时将标签变量作为参数传递，我该如何填写突变中的标量类型字段（此处为第 148 行https://github.com/joshpitzalis/path/blob/graphQL/src/ components/Add.js）并在架构中？

我是 graphQL 的新手，我知道我可能完全以错误的方式来处理这个问题。如果是这种情况，如何将对象数组添加到 graphQL 中的突变？

2个回答

您应该Tag向架构文件添加一个新类型并将其连接到Tutorial一个新关系：

type Tutorial {
  author: String
  completed: Boolean
  link: String
  title: String!
  id: ID! @isUnique
  createdAt: DateTime!
  updatedAt: DateTime!
  postedBy: User @relation(name: "UsersTutorials")
  tags: [Tag!]! @relation(name: "TutorialTags")
}

type Tag {
  id: ID!
  tag: String!
  number: Int!
  tutorials: [Tutorial!]! @relation(name: "TutorialTags")
}

然后你可以使用嵌套的 create 突变创建一个新的教程和新标签，如下所示：

const CREATE_TUTORIAL_MUTATION = gql`
  mutation CreateTutorialMutation(
    $author: String
    $link: String
    $title: String!
    $tags: [TutorialtagsTag!]!
    $completed: Boolean!
    $postedById: ID!
  ) {
    createTutorial(
      author: $author
      link: $link
      title: $title
      tags: $tags
      completed: $completed
      postedById: $postedById
    ) {
      author
      link
      title
      postedBy {
        id
        name
      }
      completed
      tags {
        id
        text
      }
    }
  }
`

这篇文章提供了有关其他方法及其权衡的更多背景信息：https : //www.graph.cool/forum/t/how-do-i-add-an-array-of-objects-to-a-mutation- in-apollo-react/365/6?u=nilan

我对您的要求的理解是，如果您有以下代码

const user = {
    name:"Rohit", 
    age:27, 
    marks: [10,15], 
    subjects:[
        {name:"maths"},
        {name:"science"}
    ]
};

const query = `mutation {
        createUser(user:${user}) {
            name
        }
}`

你一定会得到类似的东西 

"mutation {
        createUser(user:[object Object]) {
            name
        }
}"

而不是预期的 

"mutation {
        createUser(user:{
            name: "Rohit" ,
            age: 27 ,
            marks: [10 ,15 ] ,
            subjects: [
                {name: "maths" } ,
                {name: "science" } 
                ] 
            }) {
            name
        }
}"

如果这是您想要实现的目标，那么gqlast是一个不错的标记函数，您可以使用它来获得预期的结果

只需从此处获取 js 文件并将其用作：

const user = {
    name:"Rohit", 
    age:27, 
    marks: [10,15], 
    subjects:[
        {name:"maths"},
        {name:"science"}
    ]
};

const query = gqlast`mutation {
        createUser(user:${user}) {
            name
        }
}`

存储在变量中的结果query将是：

"mutation {
        createUser(user:{
            name: "Rohit" ,
            age: 27 ,
            marks: [10 ,15 ] ,
            subjects: [
                {name: "maths" } ,
                {name: "science" } 
                ] 
            }) {
            name
        }
}"
其它你可能感兴趣的问题
上一篇MakerBot 复制器 2 次故障 下一篇我应该使用哪种颜色来绘制 PLA 印刷品？