Mutation syntax in GraphQL - Mini Project: Build & Apply

GraphQL Mutation Syntax Basics

📖 Scenario: You are building a simple contact list app. You want to add new contacts to your list using GraphQL mutations.

🎯 Goal: Learn how to write a basic GraphQL mutation to add a new contact with a name and phone number.

📋 What You'll Learn

Create a mutation named addContact that accepts name and phone as inputs

Return the id, name, and phone of the newly added contact

Use proper GraphQL mutation syntax with variables

💡 Why This Matters

🌍 Real World

GraphQL mutations are used to change data on servers, such as adding or updating contacts in an app.

💼 Career

Understanding mutation syntax is essential for backend and frontend developers working with GraphQL APIs to manage data.

1

Define the mutation operation with variables

Write the first line of a GraphQL mutation named AddContact that takes two variables: $name of type String! and $phone of type String!.

GraphQL

# Your code here
mutation AddContact($name: String!, $phone: String!) {

Need a hint?

Start with the keyword mutation, then the mutation name, and declare variables with their types inside parentheses.

2

Call the addContact mutation with variables

Inside the mutation block, call addContact passing name: $name and phone: $phone as arguments.

GraphQL

mutation AddContact($name: String!, $phone: String!) {
  addContact(name: $name, phone: $phone) {
    # Your code here
  }
}

Need a hint?

Use the mutation field name addContact and pass the variables as arguments.

3

Select fields to return from the mutation

Inside the addContact block, select the fields id, name, and phone to be returned.

GraphQL

mutation AddContact($name: String!, $phone: String!) {
  addContact(name: $name, phone: $phone) {
    # Your code here
  }
}

Need a hint?

List the fields you want back from the mutation inside its curly braces.

4

Close the mutation block

Add the closing curly brace } to close the mutation operation.

GraphQL

mutation AddContact($name: String!, $phone: String!) {
  addContact(name: $name, phone: $phone) {
    id
    name
    phone
  }
  # Your code here
}

Need a hint?

Make sure all opened curly braces are properly closed.