useMutation hook in GraphQL - Mini Project: Build & Apply

Using the useMutation Hook in GraphQL

📖 Scenario: You are building a simple app to manage a list of books. You want to add new books to the list by sending data to a GraphQL server.

🎯 Goal: Learn how to use the useMutation hook to send a mutation request to add a new book to the database.

📋 What You'll Learn

Create a GraphQL mutation query named ADD_BOOK to add a book with title and author fields.

Create a useMutation hook called addBook using the ADD_BOOK mutation.

Write a function called handleAddBook that calls addBook with variables title and author.

Add a final line to export the handleAddBook function.

💡 Why This Matters

🌍 Real World

Adding new data entries to a database through a GraphQL API is common in apps like book libraries, inventory systems, or user management.

💼 Career

Understanding how to use the useMutation hook is essential for frontend developers working with GraphQL APIs to modify data.

1

Create the GraphQL mutation query

Create a GraphQL mutation query called ADD_BOOK that takes title and author as input variables and returns the id, title, and author of the added book.

GraphQL

// Your code here

Need a hint?

Use the gql tag to define a mutation with variables $title and $author.

2

Create the useMutation hook

Create a useMutation hook called addBook using the ADD_BOOK mutation.

GraphQL

import { gql, useMutation } from '@apollo/client';

const ADD_BOOK = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

// Your code here

Need a hint?

Import useMutation and call it with ADD_BOOK. Destructure the first element as addBook.

3

Write the function to call the mutation

Write a function called handleAddBook that calls addBook with variables title and author.

GraphQL

import { gql, useMutation } from '@apollo/client';

const ADD_BOOK = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

const [addBook] = useMutation(ADD_BOOK);

function handleAddBook(title, author) {
  // Your code here
}

Need a hint?

Inside handleAddBook, call addBook with an object containing variables set to { title, author }.

4

Export the function

Add a line to export the handleAddBook function as a named export.

GraphQL

import { gql, useMutation } from '@apollo/client';

const ADD_BOOK = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

const [addBook] = useMutation(ADD_BOOK);

function handleAddBook(title, author) {
  addBook({ variables: { title, author } });
}

// Your code here

Need a hint?

Use a named export to export handleAddBook.