Mutations: Creating Links

In this section, you’ll learn how you can send mutations with Apollo. It’s not that different from creati queries and follows similar steps that were mentioned before with queries:

1. write the mutation as a ts constant using the gql parser function
2. use Apollo service to call the mutation through the mutate method

Preparing the Angular components

Like before, let’s start by writing the Angular component where users will be able to add new links.

This is a standard setup for an Angular component with two input fields where users can provide the URL and description of the Link they want to create. The data that’s typed into these fields is bound in the component’s properties (description and URL) and will be used in createLink when the mutation is sent.

Writing the Mutation

But how can you now actually send the mutation? Let’s follow the two steps from before.

First, you need to define the mutation in your graphql file and parse your query with gql. You’ll do that in a similar way as with the query before.

Let’s retake a close look to understand what’s going on:

1. You first create the typescript constant called CREATE_LINK_MUTATION that stores the mutation.
2. Now you define the actual GraphQL mutation. It takes two arguments, URL and description, that you’ll have to provide when calling the mutation.
3. You also declare the response interface of CreateLinkMutationResponse

Let’s see the mutation in action!

As promised, all you need to do is call this.apollo.mutate and pass the mutation and the variables that represent the user input.

You should now see the following screen:

Two input fields and a submit-button - not very pretty but functional.

Enter some data into the fields, e.g.:

• Description: The best learning resource for GraphQL
• URL: www.howtographql.com

Then click the submit-button. You won’t get any visual feedback in the UI, but let’s see if the query worked by checking the current list of links in a Playground.

Type graphcool-framework playground into a Terminal and send the following query:

{
  allLinks {
    description
    url
  }
}

You’ll see the following server response:

{
  "data": {
    "allLinks": [
      {
        "description": "The best learning resource for GraphQL",
        "url": "www.howtographql.com"
      },
      // ...
    ]
  }
}

Awesome! The mutation works, great job! 💪