Error handling on client in GraphQL - Mini Project: Build & Apply

Error Handling on Client with GraphQL

📖 Scenario: You are building a simple client application that fetches user data from a GraphQL API. Sometimes, the API might return errors, such as when a user ID does not exist. You want to handle these errors gracefully on the client side.

🎯 Goal: Build a GraphQL query and client-side error handling logic that fetches user information and properly handles any errors returned by the server.

📋 What You'll Learn

Create a GraphQL query named GET_USER that fetches id, name, and email for a user by id.

Define a variable userId to specify which user to fetch.

Write a client function fetchUser that executes the GET_USER query with userId and handles errors.

Add error handling logic that checks if the response contains errors and stores them in a variable errorMessage.

💡 Why This Matters

🌍 Real World

Client applications often need to fetch data from GraphQL APIs and handle errors gracefully to improve user experience.

💼 Career

Understanding how to query GraphQL APIs and handle errors is essential for frontend and full-stack developers working with modern APIs.

1

Create the GraphQL query

Create a GraphQL query called GET_USER that takes a variable $id of type ID! and fetches the fields id, name, and email of the user with that id.

GraphQL

# Write the GraphQL query GET_USER here
# Your code here

Need a hint?

Use the query keyword, define a variable $id of type ID!, and request the user field with that id.

2

Define the userId variable

Define a variable called userId and set it to the string "123" to specify the user ID you want to fetch.

GraphQL

GET_USER = """query GET_USER($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}
"""

# Define userId variable here
# Your code here

Need a hint?

Assign the string "123" to the variable userId.

3

Write the fetchUser function

Write a function called fetchUser that takes no arguments and calls a generic graphqlClient.query method with the GET_USER query and variables containing id: userId. Store the result in a variable called response.

GraphQL

GET_USER = """query GET_USER($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}
"""

userId = "123"

# Write fetchUser function here
# Your code here

Need a hint?

Define a function fetchUser and call graphqlClient.query with the query and variables.

4

Add error handling logic

Inside the fetchUser function, add code to check if response contains an errors field. If it does, set a variable errorMessage to the first error message string. Otherwise, set errorMessage to None.

GraphQL

GET_USER = """query GET_USER($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}
"""

userId = "123"

def fetchUser():
    response = graphqlClient.query(GET_USER, variables={"id": userId})
    # Add error handling here
    # Your code here

Need a hint?

Use an if statement to check for errors in the response and assign errorMessage accordingly.