reactjsgraphqlapollographcool

Add an array of Objects to a mutation in apollo-react


I am using react-apollo on the front-end and graphcool on the backend. I have a mutation that creates a tutorial like so:

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
    }
  }
`

It gets called in a submit handler like so...

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

Everything works wonderfully.

Now I want to add a set of tags to when I create a new tutorial. I created the input field and connected it so that the tags variable is an array of objects, each with a tag id and the tag text.

If I try and add the tags field to the mutation it needs a scalar type. But there is doesn't seem to be a scalar type for an array of objects.

If I pass the tag variable in as a parameter when I call the mutation how do I fill in the Scalar type field in the mutation ( on line 148 here https://github.com/joshpitzalis/path/blob/graphQL/src/components/Add.js) and in the schema?

I am new to graphQL and I understand that I might be approaching this completely the wrong way. If that is the case, how do I add an array of objects to a mutation in graphQL?


Solution

  • You should add a new Tag type to your schema file and connect it to Tutorial with a new relation:

    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")
    }
    

    Then you can create a new tutorial and new tags using a nested create mutation like this:

    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
          }
        }
      }
    `
    

    This post gives more background about other approaches and their trade-offs: https://www.graph.cool/forum/t/how-do-i-add-an-array-of-objects-to-a-mutation-in-apollo-react/365/6?u=nilan