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.