Error handling on client in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if the GraphQL response has errors.

GraphQL

if (response.[1]) {
  console.log('Error found');
}

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

Adata

Bstatus

Cresult

Derrors

Attempts:

3 left

💡 Hint

Common Mistakes

Checking the 'data' field instead of 'errors'.

Using 'status' which is not part of GraphQL response object.

The errors field in a GraphQL response indicates if there were any errors during the query.

2fill in blank

medium

Complete the code to extract error messages from the GraphQL response.

GraphQL

const messages = response.errors.map(error => error.[1]);

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

Amessage

Bcode

Cstatus

Ddetail

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'code' or 'status' which are not standard error properties.

Trying to access 'detail' which is not part of GraphQL error objects.

The message property contains the human-readable error message in each error object.

3fill in blank

hard

Fix the error in the code to properly handle GraphQL errors in a try-catch block.

GraphQL

try {
  const response = await fetchGraphQL(query);
  if (response.[1]) {
    throw new Error('GraphQL error');
  }
} catch (error) {
  console.error(error);
}

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

Adata

Bstatus

Cerrors

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Checking 'data' instead of 'errors'.

Checking 'status' which is not part of the GraphQL response.

Checking response.errors is the correct way to detect GraphQL errors before throwing.

4fill in blank

hard

Fill both blanks to log all error messages from the GraphQL response.

GraphQL

if (response.[1]) {
  response.errors.forEach(error => {
    console.log(error.[2]);
  });
}

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

Aerrors

Bmessage

Cdata

Dstatus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data' or 'status' instead of 'errors' for the first blank.

Using 'status' or 'data' instead of 'message' for the second blank.

The errors field holds the error list, and each error's message contains the text.

5fill in blank

hard

Fill all three blanks to create a function that returns error messages from a GraphQL response or an empty array if none.

GraphQL

function getErrorMessages(response) {
  return response.[1] ? response.errors.map(error => error.[2]) : [3];
}

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

Aerrors

Bmessage

C[]

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Returning null instead of an empty array when no errors.

Using 'data' or 'status' instead of 'errors' for the first blank.

This function checks if errors exist, maps their message properties, or returns an empty array if no errors.