useMutation hook in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useMutation hook from Apollo Client.

GraphQL

import { [1] } from '@apollo/client';

Drag options to blanks, or click blank then click option'

AuseSubscription

BuseApolloClient

CuseMutation

DuseQuery

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useQuery instead of useMutation

Forgetting to import the hook

Using useSubscription by mistake

The useMutation hook is imported from '@apollo/client' to perform GraphQL mutations.

2fill in blank

medium

Complete the code to define a mutation using gql tagged template literal.

GraphQL

const ADD_TODO = gql`mutation AddTodo($text: String!) { addTodo(text: [1]) { id text } }`;

Drag options to blanks, or click blank then click option'

Atext

BinputText

CtodoText

D$text

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without $

Using a different variable name

Forgetting the $ sign

In GraphQL mutations, variables are referenced with a $ prefix, so $text is correct.

3fill in blank

hard

Fix the error in the mutation call to pass variables correctly.

GraphQL

const [addTodo] = useMutation(ADD_TODO);

addTodo({ variables: [1] });

Drag options to blanks, or click blank then click option'

A{ text }

Btext

C{ text: text }

Dvariables

Attempts:

3 left

💡 Hint

Common Mistakes

Passing variable directly without wrapping in object

Passing a string instead of object

Using wrong variable name

The variables option expects an object with keys matching the mutation variables, so { text } is correct.

4fill in blank

hard

Fill both blanks to destructure the mutation result and call the mutation function.

GraphQL

const [[1], { [2] }] = useMutation(ADD_TODO);

Drag options to blanks, or click blank then click option'

AaddTodo

Bloading

Cerror

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the mutation function with the result object

Destructuring wrong property from the result object

The first element is the mutation function addTodo, and the second is an object containing data about the mutation result.

5fill in blank

hard

Fill all three blanks to handle mutation with async/await and error catching.

GraphQL

try {
  const [1] = await addTodo({ variables: { text: newText } });
  console.log([2]);
} catch ([3]) {
  console.error('Error:', error);
}

Drag options to blanks, or click blank then click option'

Aresult

Bdata

Cerror

Dresult.data

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the whole result instead of result.data

Not catching errors properly

Using wrong variable names

The mutation result is stored in result. To access the data, use result.data. Errors are caught in the catch block as error.

Practice

1. What is the primary purpose of the useMutation hook in GraphQL?

easy

A. To subscribe to real-time updates

B. To fetch data from the server

C. To cache data locally

D. To send changes or updates to the server

Solution

1. Step 1: Understand the role of useMutation

   The useMutation hook is designed to send changes or updates to the server, such as creating, updating, or deleting data.

2. Step 2: Differentiate from other hooks

   Unlike useQuery which fetches data, useMutation is for sending data changes.

3. Final Answer:

   To send changes or updates to the server -> Option D

4. Quick Check:

   useMutation = send changes [OK]

Hint: useMutation always sends updates, not fetches [OK]

Common Mistakes:

• Confusing useMutation with useQuery
• Thinking useMutation fetches data
• Assuming useMutation caches data

2. Which of the following is the correct way to call a mutation function returned by useMutation?

easy

A. const [addUser] = useMutation(ADD_USER); addUser({ variables: { name: 'Alice' } });

B. const addUser = useMutation(ADD_USER); addUser({ name: 'Alice' });

C. const addUser = useMutation(ADD_USER); addUser();

D. const [addUser] = useMutation(ADD_USER); addUser('Alice');

Solution

1. Step 1: Understand useMutation return value

   useMutation returns an array where the first element is the mutation function.

2. Step 2: Correctly call the mutation function

   The mutation function is called with an object containing a variables key holding the data to send.

3. Final Answer:

   const [addUser] = useMutation(ADD_USER); addUser({ variables: { name: 'Alice' } }); -> Option A

4. Quick Check:

   Call mutation with variables object [OK]

Hint: Call mutation with { variables: {...} } object [OK]

Common Mistakes:

• Calling mutation without variables object
• Not destructuring the mutation function
• Passing variables directly without wrapping

3. Given the code below, what will be the value of loading immediately after calling addPost({ variables: { title: 'Hello' } })?

const [addPost, { loading, error }] = useMutation(ADD_POST);
addPost({ variables: { title: 'Hello' } });

medium

A. undefined

B. false

C. true

D. null

Solution

1. Step 1: Understand loading state in useMutation

   When the mutation function is called, loading becomes true until the server responds.

2. Step 2: Check immediate state after calling mutation

   Immediately after calling addPost, the mutation is in progress, so loading is true.

3. Final Answer:

   true -> Option C

4. Quick Check:

   Mutation called = loading true [OK]

Hint: loading is true while mutation runs [OK]

Common Mistakes:

• Assuming loading is false immediately
• Confusing loading with error
• Expecting loading to be undefined

4. Identify the error in the following code snippet using useMutation:

const [updateUser, { loading, error }] = useMutation(UPDATE_USER);

updateUser({ name: 'Bob' });

medium

A. Mutation function called without wrapping variables in an object

B. Mutation function not destructured from useMutation

C. Missing import of useMutation

D. Using wrong hook for mutation

Solution

1. Step 1: Check how mutation function is called

   The mutation function expects an object with a variables key, but here it is called with { name: 'Bob' } directly.

2. Step 2: Identify correct call format

   The correct call should be updateUser({ variables: { name: 'Bob' } }).

3. Final Answer:

   Mutation function called without wrapping variables in an object -> Option A

4. Quick Check:

   Variables must be inside variables object [OK]

Hint: Always wrap variables inside { variables: {...} } [OK]

Common Mistakes:

• Passing variables directly without wrapping
• Forgetting to destructure mutation function
• Calling mutation without arguments

5. You want to update a user's email and then immediately fetch the updated user data. Which approach using useMutation is best to ensure the UI shows fresh data?

hard

A. Call the mutation and manually update the cache without refetching

B. Call the mutation, then use refetchQueries option to reload the user query

C. Call the mutation without any options and rely on cache update

D. Call the mutation and ignore loading and error states

Solution

1. Step 1: Understand data freshness after mutation

   After a mutation, the UI may show stale data unless the cache is updated or queries are refetched.

2. Step 2: Use refetchQueries to reload fresh data

   Using the refetchQueries option with useMutation triggers a fresh fetch of specified queries, ensuring updated UI.

3. Final Answer:

   Call the mutation, then use refetchQueries option to reload the user query -> Option B

4. Quick Check:

   Use refetchQueries for fresh data after mutation [OK]

Hint: Use refetchQueries to refresh data after mutation [OK]

Common Mistakes:

• Ignoring cache updates causing stale UI
• Not handling loading or error states
• Assuming mutation auto-refreshes queries