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.