Field-level errors in GraphQL - Mini Project: Build & Apply

Handling Field-Level Errors in GraphQL

📖 Scenario: You are building a simple GraphQL API for a user registration system. Users must provide a username and email. The API should validate these fields and return specific error messages if the input is invalid.

🎯 Goal: Create a GraphQL schema and resolver setup that returns field-level errors for invalid username and email inputs during user registration.

📋 What You'll Learn

Define a GraphQL Mutation called registerUser that accepts username and email as inputs.

Create a UserResponse type that includes a user field and a list of FieldError objects.

Each FieldError must have field and message strings.

Implement resolver logic to validate username and email and return appropriate field-level errors.

Return the created user object only if there are no validation errors.

💡 Why This Matters

🌍 Real World

Field-level error handling is essential in APIs to give users clear feedback on what input is invalid, improving user experience and data quality.

💼 Career

Understanding how to implement field-level errors in GraphQL is valuable for backend developers building robust APIs that communicate validation issues clearly to frontend clients.

1

Define GraphQL Types for User and FieldError

Define a GraphQL type User with fields id (ID!), username (String!), and email (String!). Also define a type FieldError with fields field (String!) and message (String!).

GraphQL

# Define the User and FieldError types here
# Your code here

Hint

Start by defining the User type with three fields. Then define FieldError with field and message as required strings.

2

Create UserResponse Type and Mutation Signature

Add a type UserResponse that has a user field of type User (nullable) and a errors field which is a list of FieldError (nullable). Then define a type Mutation with a registerUser mutation that accepts username and email as non-nullable strings and returns UserResponse.

GraphQL

type User {
  id: ID!
  username: String!
  email: String!
}

type FieldError {
  field: String!
  message: String!
}

# Define UserResponse and Mutation types here
# Your code here

Hint

Define UserResponse with nullable user and a list of FieldError. Then add the registerUser mutation with required inputs and return type.

3

Implement Resolver Logic for Field-Level Validation

In the resolver for registerUser, create an empty list called errors. Check if username length is less than 3; if so, add a FieldError with field set to "username" and an appropriate message. Check if email does not contain "@"; if so, add a FieldError with field set to "email" and an appropriate message. If errors is not empty, return it with user as null. Otherwise, return a new user object with id "1", and the given username and email, and errors as null.

GraphQL

type User {
  id: ID!
  username: String!
  email: String!
}

type FieldError {
  field: String!
  message: String!
}

type UserResponse {
  user: User
  errors: [FieldError!]
}

type Mutation {
  registerUser(username: String!, email: String!): UserResponse!
}

const resolvers = {
  Mutation: {
    registerUser: (_, { username, email }) => {
      // Add validation logic here
      // Your code here
    }
  }
};

Hint

Use an array errors to collect validation messages. Return early with errors if any exist. Otherwise, return the new user object.

4

Complete Schema Export and Resolver Setup

Export the GraphQL schema string including all types and the mutation. Export the resolvers object as default. Ensure the schema string includes type User, type FieldError, type UserResponse, and type Mutation with registerUser.

GraphQL

type User {
  id: ID!
  username: String!
  email: String!
}

type FieldError {
  field: String!
  message: String!
}

type UserResponse {
  user: User
  errors: [FieldError!]
}

type Mutation {
  registerUser(username: String!, email: String!): UserResponse!
}

const resolvers = {
  Mutation: {
    registerUser: (_, { username, email }) => {
      const errors = [];
      if (username.length  0) {
        return { errors, user: null };
      }
      return { user: { id: "1", username, email }, errors: null };
    }
  }
};

# Export schema and resolvers here
# Your code here

Hint

Wrap all type definitions in a template string called typeDefs. Export both typeDefs and resolvers for use in your GraphQL server.

Practice

1. What is the main purpose of field-level errors in GraphQL queries?

easy

A. To show exactly which field in the query caused an error

B. To speed up the query execution time

C. To encrypt the query data for security

D. To automatically fix errors in the query

Solution

1. Step 1: Understand what field-level errors represent

   Field-level errors identify the specific part of a query that failed, not the whole query.

2. Step 2: Recognize the benefit of field-level errors

   This helps apps show clear messages next to the exact problem fields, improving user experience.

3. Final Answer:

   To show exactly which field in the query caused an error -> Option A

4. Quick Check:

   Field-level errors = pinpoint error location [OK]

Hint: Field-level errors pinpoint the exact failing field [OK]

Common Mistakes:

• Thinking errors speed up queries
• Believing errors fix themselves
• Confusing errors with encryption

2. Which of the following is the correct way to represent a field-level error path in a GraphQL error response?

easy

A. "location": ["user", "email"]

B. "path": "user.email"

C. "error": "user.email"

D. "path": ["user", "email"]

Solution

1. Step 1: Identify the standard format for error paths

   GraphQL error paths are arrays showing the nested fields causing the error, e.g., ["user", "email"].

2. Step 2: Compare options to the standard format

   "path": ["user", "email"] matches the array format; others use strings or wrong keys.

3. Final Answer:

   "path": ["user", "email"] -> Option D

4. Quick Check:

   Error path = array of field names [OK]

Hint: Error paths use arrays, not dot strings [OK]

Common Mistakes:

• Using dot notation strings for paths
• Confusing 'error' with 'path' key
• Using 'location' instead of 'path'

3. Given this GraphQL error response snippet:

{"errors": [{"message": "Cannot query field 'age' on type 'User'", "path": ["user", "age"]}]}

What does the path ["user", "age"] indicate?

medium

A. The error is in the 'age' field inside the 'user' object

B. The entire 'user' object is missing

C. The query has a syntax error at the root

D. The 'age' field is null but valid

Solution

1. Step 1: Analyze the error message and path

   The message says 'Cannot query field age on type User', and the path shows the nested location: user -> age.

2. Step 2: Interpret the meaning of the path

   This means the error is specifically with the 'age' field inside the 'user' object, not the whole user or root.

3. Final Answer:

   The error is in the 'age' field inside the 'user' object -> Option A

4. Quick Check:

   Path shows exact field with error [OK]

Hint: Error path shows nested field causing issue [OK]

Common Mistakes:

• Assuming whole object is missing
• Confusing syntax errors with field errors
• Thinking null fields cause this error

4. You receive this GraphQL error response:

{"errors": [{"message": "Field 'price' must be a positive number", "path": ["product", "price"]}]}

Which fix will correctly address the field-level error?

medium

A. Ignore the error and retry the query

B. Change the 'price' value to a positive number in the query variables

C. Rename 'price' to 'cost' in the query

D. Remove the 'price' field from the query entirely

Solution

1. Step 1: Understand the error message and path

   The error says 'price' must be positive, and the path points to product -> price field.

2. Step 2: Determine the correct fix

   Fixing means providing a positive number for 'price' in the query variables, not removing or renaming the field.

3. Final Answer:

   Change the 'price' value to a positive number in the query variables -> Option B

4. Quick Check:

   Fix value to meet field rules [OK]

Hint: Fix field value to meet error message rules [OK]

Common Mistakes:

• Removing required fields
• Renaming fields without schema support
• Ignoring errors expecting auto-fix

5. You have a GraphQL query requesting nested fields:

{ user { name, posts { title, comments { text, author } } } }

If the error response shows:

{"errors": [{"message": "Cannot query field 'author' on type 'Comment'", "path": ["user", "posts", 0, "comments", 2, "author"]}]}

What does this error tell you about the query and how should you fix it?

hard

A. The 'comments' array is empty; add comments to fix the error

B. The 'posts' field is missing; add it to the query

C. The 'author' field does not exist on 'Comment'; remove or correct it in the query

D. The 'user' field is invalid; rename it to 'member'

Solution

1. Step 1: Analyze the error message and path

   The error says 'author' is not a valid field on 'Comment'. The path shows it is nested inside user -> posts -> comments at index 2.

2. Step 2: Decide the fix based on schema rules

   Since 'author' is invalid, you should remove or correct this field in the query to match the schema.

3. Final Answer:

   The 'author' field does not exist on 'Comment'; remove or correct it in the query -> Option C

4. Quick Check:

   Field error means fix or remove invalid field [OK]

Hint: Invalid field in nested path means fix query field name [OK]

Common Mistakes:

• Assuming empty arrays cause this error
• Adding missing fields not in schema
• Renaming unrelated fields