Mutations

Now that you know how to get GraphQL data, it's time to update that data with GraphQL mutations!

The Mutation component

Using the Mutation component from Scala.js is just like using it with the original JavaScript API. Simply pass in a parsed GraphQL mutation object (from gql) and a function that decides when to perform the mutaiton what to render given the state of the mutation. Because the Mutation component tracks all steps of performing a mutation, you can easily render loading and error states by reading properties of the mutation status given to you.

When you use the Mutation component, Apollo Client also keeps your local cache in sync with the server by updating the cache with the mutation response.

Let's see this in action!

import com.apollographql.scalajs.react.Mutation

Mutation[js.Object, js.Object](
  gql(
    """mutation addTodo($type: String!) {
      |  addTodo(type: $type) {
      |    id
      |    type
      |  }
      |}""".stripMargin
  )
) { (addTodo, status) =>
  button(onClick := () => {
    addTodo(js.Dynamic.literal(
      "type" -> "myTodoType"
    ))
  })
}

Here, we specified the type of the variables and result to be js.Object, essentially making it untyped. This data isn't super friendly to work with, though, so let's see how we can type our data.

Typing Mutation Variables and Responses

Apollo Scala.js allows you to specify models for the variables and mutations results. These models are usually case classes and can be handwritten or generated by Apollo CLI (see automatic mutation types for how to set this up).

Let's say we have a mutation

mutation addTodo($todoType: String!) {
  addTodo(type: $todoType) {
    id
  }
}

The corresponding type for this would look something like this:

case class Variables(todoType: String)
case class Todo(id: String)
case class MutationData(addTodo: Todo)

Once we have these types written, all we have to do is replace the js.Objects with MutationData and Variables to get typed mutation calls and responses! Apollo Scala.js handles the process of generating JavaScript objects from your variables parsing the result into Scala objects, so you can focus on using the data.

Mutation[MutationData, Variables](
  gql(
    """mutation addTodo($type: String!) {
      |  addTodo(type: $type) {
      |    id
      |    type
      |  }
      |}""".stripMargin
  )
)) { (addTodo, mutationStatus) =>
  button(onClick := () => {
    addTodo(Variables(
      todoType = "myTodoType"
    ))
  })
}

Automatic Mutation Types

With apollo, we can automatically generate mutation objects that tie together GraphQL mutations with variables and response types based on the schema definition. First, make sure you have followed the Apollo CLI Installation steps and downloaded a schema by following the instructions. For this example, we will be using the GraphQL server at https://graphql-todo-tracker.glitch.me.

With Apollo CLI installed, we can define our first mutation! Under src/main/graphql, you can define static mutation that will be converted to Scala code by Apollo CLI. For example, we could define a mutation addtodo.graphql:

mutation AddTodo($typ: String!) {
  addTodo(type: $typ) {
    typ: type
  }
}

Which results in an object AddTodoMutation being generated. To use this in a mutation component, we can simply pass the generated object in instead of a mutation string and Apollo Scala.js will automatically gather the variables and result type based on the generated code.

Mutation(AddTodoMutation)  { (addTodo, mutationStatus)  =>
  button(onClick := () => {
    addTodo(AddTodoMutation.Variables(
      typ = "myTodoType"
    ))
  })
}