Why schema design affects usability in GraphQL - See It in Action

Why Schema Design Affects Usability in GraphQL

📖 Scenario: Imagine you are building a simple online bookstore API using GraphQL. You want users to easily find books and authors without confusion.

🎯 Goal: Build a GraphQL schema step-by-step that shows how good schema design improves usability by making queries clear and efficient.

📋 What You'll Learn

Create a basic GraphQL schema with types for Book and Author

Add a query type to fetch books and authors

Introduce a configuration variable to control the number of books returned

Implement a query that uses the configuration to limit results

Complete the schema with descriptions to improve usability

💡 Why This Matters

🌍 Real World

GraphQL schemas are used to define how clients can query and manipulate data in APIs, making clear design essential for usability.

💼 Career

Understanding schema design is key for backend developers and API designers to create efficient, user-friendly APIs.

1

Create basic types for Book and Author

Define a GraphQL schema with types Book and Author. Book should have fields id (ID), title (String), and author (Author). Author should have fields id (ID) and name (String).

GraphQL

# Define types Book and Author
# Your code here

Hint

Use type keyword to define GraphQL object types with required fields.

2

Add Query type to fetch books and authors

Add a Query type with two fields: books returning a list of Book and authors returning a list of Author.

GraphQL

type Author {
  id: ID!
  name: String!
}

type Book {
  id: ID!
  title: String!
  author: Author!
}

# Add Query type with books and authors fields
# Your code here

Hint

Use square brackets [] to indicate a list type in GraphQL.

3

Add a configuration variable to limit books returned

Modify the books field in Query to accept an argument limit of type Int to control how many books are returned.

GraphQL

type Author {
  id: ID!
  name: String!
}

type Book {
  id: ID!
  title: String!
  author: Author!
}

type Query {
  books: [Book!]!
  authors: [Author!]!
}

# Add limit argument to books field
# Your code here

Hint

Arguments go inside parentheses after the field name.

4

Add descriptions to improve usability

Add descriptions to the Book and Author types and to the books query field explaining their purpose. Use triple quotes """ for descriptions.

GraphQL

"""Type representing an author"""
type Author {
  id: ID!
  name: String!
}

"""Type representing a book"""
type Book {
  id: ID!
  title: String!
  author: Author!
}

"""Query to get list of books, optionally limited"""
type Query {
  books(limit: Int): [Book!]!
  authors: [Author!]!
}

# Add descriptions above types and fields
# Your code here

Hint

Descriptions help users understand the schema and improve usability.

Practice

1. Why is good schema design important in GraphQL APIs?

easy

A. It makes data easier to find and use

B. It increases the size of the database

C. It hides all data from users

D. It slows down query responses

Solution

1. Step 1: Understand schema design purpose

   Good schema design organizes data clearly for easy access.

2. Step 2: Identify impact on usability

   Clear design helps users and developers find and use data quickly.

3. Final Answer:

   It makes data easier to find and use -> Option A

4. Quick Check:

   Good design = easier data use [OK]

Hint: Good design means easy data access [OK]

Common Mistakes:

• Thinking schema size affects usability directly
• Assuming schema hides data by default
• Believing good design slows queries

2. Which of the following is the correct way to define a simple GraphQL type for a User with fields id and name?

easy

A. type User { id Int, name String }

B. User type { id: Int, name: String }

C. type User { id: Int name: String }

D. type User (id: Int, name: String)

Solution

1. Step 1: Recall GraphQL type syntax

   GraphQL types use curly braces with fields and types separated by colon.

2. Step 2: Check each option's syntax

   type User { id: Int name: String } uses correct syntax: type User { id: Int name: String }.

3. Final Answer:

   type User { id: Int name: String } -> Option C

4. Quick Check:

   Correct syntax uses colon and braces [OK]

Hint: Use colon between field and type inside braces [OK]

Common Mistakes:

• Omitting colon between field and type
• Using parentheses instead of braces
• Placing type keyword incorrectly

3. Given this GraphQL schema snippet:

type Query { user(id: ID!): User }
type User { id: ID! name: String }

What will the query { user(id: "1") { name } } return if the user with id 1 has name "Alice"?

medium

A. { "data": { "user": { "id": "1" } } }

B. { "data": { "user": { "name": "Alice" } } }

C. { "error": "User not found" }

D. { "data": { "user": null } }

Solution

1. Step 1: Understand the query request

   The query asks for the user's name with id "1".

2. Step 2: Match schema and data

   Since user with id "1" exists and name is "Alice", the response includes that name.

3. Final Answer:

   { "data": { "user": { "name": "Alice" } } } -> Option B

4. Quick Check:

   Query requests name, response includes name [OK]

Hint: Response matches requested fields only [OK]

Common Mistakes:

• Expecting id field when not requested
• Assuming error if user exists
• Confusing null with valid data

4. Consider this GraphQL schema snippet:

type User { id: ID! name: String }

Which of the following schema definitions will cause an error when querying { user { id name } }?

medium

A. type Query { user: String }

B. type Query { user: [User] }

C. type Query { user: User! }

D. type Query { user: User }

Solution

1. Step 1: Check the return type of user field

   Query expects user field to return a User object or list of Users.

2. Step 2: Identify invalid return type

   type Query { user: String } returns a String instead of User, causing a type mismatch error.

3. Final Answer:

   type Query { user: String } -> Option A

4. Quick Check:

   Return type must match queried fields [OK]

Hint: Return type must match requested object type [OK]

Common Mistakes:

• Confusing non-null with wrong type
• Assuming list type always causes error
• Ignoring type mismatch errors

5. You want to design a GraphQL schema for a blog where each Post has an author and comments. To improve usability, which schema design choice is best?

hard

A. Make author and comments fields return String with JSON data

B. Only include post title and ignore author and comments

C. Separate author and comments into unrelated types without linking

D. Embed author and comments fields inside Post type with proper types

Solution

1. Step 1: Consider usability for users and developers

   Embedding author and comments as fields with proper types makes data easy to query and understand.

2. Step 2: Evaluate other options

   Ignoring fields or using strings with JSON reduces clarity and usability; separating without links causes confusion.

3. Final Answer:

   Embed author and comments fields inside Post type with proper types -> Option D

4. Quick Check:

   Linked types improve usability [OK]

Hint: Link related data with proper types for clarity [OK]

Common Mistakes:

• Ignoring related data in schema
• Using strings instead of typed fields
• Separating related data without connections