Schema visibility control in GraphQL - Mini Project: Build & Apply

Schema Visibility Control in GraphQL

📖 Scenario: You are building a GraphQL API for a company that wants to control which parts of the schema are visible to different users. This helps keep sensitive data hidden from unauthorized users.

🎯 Goal: Build a GraphQL schema with fields that can be hidden or shown based on a visibility setting.

📋 What You'll Learn

Create a GraphQL type with multiple fields

Add a visibility configuration variable

Use a resolver function that checks the visibility setting

Complete the schema with a query that respects visibility control

💡 Why This Matters

🌍 Real World

Many APIs need to hide sensitive data from unauthorized users. Controlling schema visibility helps protect data and customize API responses.

💼 Career

Understanding schema visibility control is important for backend developers and API designers to build secure and flexible GraphQL APIs.

1

Create the GraphQL type with fields

Create a GraphQL type called User with fields id (ID!), name (String!), and email (String!).

GraphQL

# Define the User type with id, name, and email fields
# Your code here

Hint

Use the type keyword to define a GraphQL type and specify the fields with their types.

2

Add a visibility configuration variable

Create a variable called showEmail and set it to true to control if the email field is visible.

GraphQL

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

# Create a variable showEmail and set it to true
# Your code here

Hint

Use const to declare a constant variable in JavaScript that controls visibility.

3

Add resolver logic to control field visibility

Write a resolver function for the email field that returns the email only if showEmail is true, otherwise returns null.

GraphQL

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

const showEmail = true;

const resolvers = {
  User: {
    email(user) {
      // Your code here
    }
  }
};

Hint

Use a ternary operator to check showEmail and return the email or null accordingly.

4

Complete the schema with a query type

Add a Query type with a field user that returns a User. Also add a resolver for user that returns a user object with id, name, and email.

GraphQL

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

type Query {
  # Your code here
}

const showEmail = true;

const resolvers = {
  User: {
    email(user) {
      return showEmail ? user.email : null;
    }
  },
  Query: {
    # Your code here
  }
};

Hint

Define the Query type and add a resolver that returns a user object with the required fields.

Practice

1. What is the main purpose of schema visibility control in GraphQL?

easy

A. To limit what parts of the schema users can see or access

B. To speed up query execution by caching results

C. To automatically generate schema documentation

D. To convert GraphQL queries into SQL queries

Solution

1. Step 1: Understand schema visibility control concept

   Schema visibility control is about restricting access to parts of the GraphQL schema based on user roles or permissions.

2. Step 2: Identify the main goal

   The goal is to protect sensitive data and tailor the API by limiting what users can see or use.

3. Final Answer:

   To limit what parts of the schema users can see or access -> Option A

4. Quick Check:

   Schema visibility control = limit schema access [OK]

Hint: Focus on access limits, not performance or docs [OK]

Common Mistakes:

• Confusing visibility control with caching
• Thinking it auto-generates docs
• Assuming it converts queries to SQL

2. Which of the following is a correct way to hide a field in a GraphQL schema using a directive?

easy

A. @deprecated(reason: "hidden") on the field

B. @private on the query operation

C. @skip(if: false) on the schema type

D. @hide(if: true) on the field definition

Solution

1. Step 1: Understand directive usage for visibility

   Directives like @hide(if: true) can be used on fields to conditionally hide them based on logic.

2. Step 2: Evaluate options

   @private is not a standard directive; @skip(if: false) means do not skip (show field); @deprecated marks fields as deprecated but does not hide them.

3. Final Answer:

   @hide(if: true) on the field definition -> Option D

4. Quick Check:

   Use conditional directives like @hide to control visibility [OK]

Hint: Look for conditional directive on field, not operation [OK]

Common Mistakes:

• Using @deprecated to hide fields
• Applying directives on queries instead of fields
• Misunderstanding @skip logic

3. Given this schema snippet with a visibility directive:

type User {
  id: ID!
  email: String @hide(if: $isGuest)
  name: String
}

What fields will a guest user see if $isGuest is true?

medium

A. id and name only

B. id, email, and name

C. email and name only

D. id and email only

Solution

1. Step 1: Analyze the directive condition

   The @hide(if: $isGuest) directive hides the email field when $isGuest is true.

2. Step 2: Determine visible fields for guest

   Since $isGuest is true, email is hidden. The visible fields are id and name.

3. Final Answer:

   id and name only -> Option A

4. Quick Check:

   @hide(if: true) hides field = id and name visible [OK]

Hint: True condition hides field, so exclude it [OK]

Common Mistakes:

• Including hidden fields in output
• Confusing @hide with @skip
• Ignoring variable values in directives

4. You wrote this directive to hide a field:

email: String @hide(if: isGuest)

But the field is always visible. What is the likely error?

medium

A. Using @hide on a field is not supported

B. Missing $ before variable name in directive condition

C. The field type String cannot have directives

D. The directive should be @skip, not @hide

Solution

1. Step 1: Check variable usage in directive

   GraphQL variables in directives must be prefixed with $. Here, isGuest is missing $.

2. Step 2: Understand impact of missing $

   Without $, the directive condition is invalid or always false, so the field is never hidden.

3. Final Answer:

   Missing $ before variable name in directive condition -> Option B

4. Quick Check:

   Variables need $ prefix in directives [OK]

Hint: Always prefix variables with $ in directives [OK]

Common Mistakes:

• Forgetting $ before variable in directive
• Assuming @hide is unsupported
• Thinking directives can't be on scalar fields

5. You want to create a GraphQL API that shows users' email only to admins and hides it from regular users. Which approach best implements this schema visibility control?

hard

A. Return null for email in resolver for regular users without schema changes

B. Remove the email field from the schema entirely

C. Use @hide(if: $isNotAdmin) on the email field and pass $isNotAdmin from server context

D. Use @deprecated directive on email field for regular users

Solution

1. Step 1: Identify requirement for conditional visibility

   The email field should be visible only to admins, so visibility depends on user role.

2. Step 2: Evaluate options for controlling visibility

   Use a directive like @hide(if: $isNotAdmin) on the email field and pass $isNotAdmin from server context. This uses a directive with a variable from server context to hide email for non-admins, which is the correct schema visibility control method.

3. Step 3: Understand why other options fail

   Removing the field removes it for all users; @deprecated only marks as outdated; returning null hides data but not schema field.

4. Final Answer:

   Use @hide(if: $isNotAdmin) on the email field and pass $isNotAdmin from server context -> Option C

5. Quick Check:

   Use conditional directives with server variables for visibility [OK]

Hint: Use directives with server variables for role-based hiding [OK]

Common Mistakes:

• Removing fields instead of hiding conditionally
• Using @deprecated to hide fields
• Returning null but not hiding schema field