Error handling on client in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output when a GraphQL query returns an error?

Consider a GraphQL query that requests a user's name but the server returns an error due to a missing user ID. What will the client receive?

GraphQL

query GetUserName {
  user(id: null) {
    name
  }
}

A {"data": {"user": null}, "errors": [{"message": "User ID is required"}]}

B {"data": null}

C {"error": "User ID is required"}

D {"data": {"user": {"name": ""}}, "errors": []}

💡 Hint

GraphQL responses include both data and errors fields when errors occur.

When a GraphQL query has an error, the response contains a data field with null or partial data and an errors array describing the problem.

🧠 Conceptual

intermediate

How should a client handle partial data with errors in GraphQL?

A GraphQL query returns some data but also includes errors. What is the best practice for the client to handle this?

A Discard all data and show only the error messages.

B Retry the query automatically without informing the user.

C Display the data and show error messages to the user.

D Ignore the errors and use the data as is.

💡 Hint

GraphQL allows partial data with errors; clients should inform users appropriately.

Clients should use the available data but also inform users about errors to avoid confusion and improve user experience.

📝 Syntax

advanced

Which GraphQL client code snippet correctly handles errors in a query response?

Given the following client code snippets, which one properly checks for errors in the GraphQL response?

GraphQL

const response = await fetchGraphQL(query);
// Which snippet correctly handles errors?

A if (response.errors) { console.error(response.errors); } else { console.log(response.data); }

B if (response.data.errors) { console.error(response.data.errors); } else { console.log(response.data); }

C if (response.error) { console.error(response.error); } else { console.log(response.data); }

D if (response.data) { console.error(response.data); } else { console.log(response.errors); }

💡 Hint

GraphQL responses have an errors field at the top level, not inside data.

The errors field is a top-level array in the response object. Checking response.errors is correct.

❓ optimization

advanced

How can a client optimize error handling to reduce UI disruptions?

When a GraphQL query returns errors, how can the client minimize negative impact on user experience?

A Ignore all errors to avoid confusing the user.

B Batch multiple queries to reduce the number of error messages shown.

C Show detailed error stack traces to the user immediately.

D Reload the entire page on any error.

💡 Hint

Batching queries can reduce the frequency of errors shown to users.

Batching queries reduces the number of separate error messages, making error handling smoother and less disruptive.

🔧 Debug

expert

Why does this GraphQL client code fail to catch errors properly?

Examine the client code below. It does not detect errors returned by the GraphQL server. What is the cause?

GraphQL

const response = await fetchGraphQL(query);
if (!response.data) {
  console.error('No data received');
} else {
  console.log('Data:', response.data);
}

A The code should check 'response.data.errors' to find errors.

B The code incorrectly checks 'response.data' instead of 'response.error'.

C The code should use try-catch around the fetchGraphQL call to catch errors.

D The code does not check the 'errors' field in the response, so errors are ignored.

💡 Hint

GraphQL errors are in a separate 'errors' field, not inside 'data'.

The code only checks if 'data' exists but does not check the 'errors' field, so errors are missed.