Mocking resolvers in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this mocked resolver query?

Given this GraphQL schema and mocked resolver, what will be the output of the query?

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

type User {
  id: ID!
  name: String
  age: Int
}

// Mock resolver for user
const mocks = {
  Query: () => ({
    user: (_parent, args) => ({
      id: args.id,
      name: "Alice",
      age: 30
    })
  })
};

query {
  user(id: "123") {
    id
    name
    age
  }
}

GraphQL

const mocks = {
  Query: () => ({
    user: (_parent, args) => ({
      id: args.id,
      name: "Alice",
      age: 30
    })
  })
};

A { "data": { "user": { "id": "123", "name": "Alice", "age": 30 } } }

B { "data": { "user": { "id": null, "name": "Alice", "age": 30 } } }

C { "data": { "user": { "id": "123", "name": null, "age": 30 } } }

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

💡 Hint

Look at how the id is returned from the args in the resolver.

The mocked resolver returns the user object with id taken from the query argument id. So the output includes "id": "123" along with the fixed name and age.

📝 Syntax

intermediate

Which mocked resolver code snippet has a syntax error?

Identify the option that contains a syntax error in the mocked resolver definition.

A const mocks = { Query: () => ({ user: (_parent, args) => ({ id: args.id, name: "Bob" }) }) };

B const mocks = { Query: () => ({ user: (_parent, args) => { id: args.id, name: "Bob" } }) };

C ;} )} )} "boB" :eman ,di.sgra :di {( >= )sgra ,tnerap_( :resu {( >= )( :yreuQ { = skcom tsnoc

D onst mocks = { Query: () => ({ user: (_parent, args) => ({ id: args.id, name: "Bob" }) }) };

💡 Hint

Check the arrow function syntax and object return syntax carefully.

Option B uses curly braces without a return statement inside the arrow function, so it does not return an object but a block, causing a syntax error or unexpected behavior.

❓ optimization

advanced

How to optimize mocking multiple similar resolvers?

You have many similar resolvers returning user data with different IDs. Which approach optimizes mocking these resolvers efficiently?

A Mock only one user and return null for others.

B Write separate resolver functions for each user ID manually.

C Hardcode a single user object and ignore the <code>id</code> argument in all resolvers.

D Use a generic resolver function that returns user data based on the <code>id</code> argument dynamically.

💡 Hint

Think about how to reuse code and handle dynamic input.

Using a generic resolver that reads the id argument and returns corresponding data dynamically avoids repetitive code and scales better.

🔧 Debug

advanced

Why does this mocked resolver return null for a field?

Given this mocked resolver snippet, why does the email field return null in the query result?

const mocks = {
  User: () => ({
    id: "1",
    name: "Eve"
  })
};

query {
  user(id: "1") {
    id
    name
    email
  }
}

A The <code>email</code> field is not defined in the mocked resolver, so it returns null by default.

B The resolver returns an error causing the <code>email</code> field to be null.

C The query is malformed and does not request the <code>email</code> field properly.

D The schema does not include the <code>email</code> field in the User type.

💡 Hint

Check which fields the mock resolver explicitly returns.

Mocked resolvers return null for any fields not explicitly defined in the mock. Since email is missing, it returns null.

🧠 Conceptual

expert

What is the main benefit of mocking resolvers in GraphQL development?

Choose the best explanation for why developers use mocked resolvers during GraphQL API development.

A To automatically generate database schemas from GraphQL queries.

B To permanently replace the backend with static data for production use.

C To simulate API responses without needing a real backend, enabling frontend development and testing independently.

D To enforce strict type checking on client-side queries.

💡 Hint

Think about development workflow and decoupling frontend from backend.

Mocking resolvers allows frontend developers to work with expected data shapes without waiting for backend implementation, speeding up development and testing.

Practice

1. What is the main purpose of mocking resolvers in GraphQL?

easy

A. To simulate API responses without needing real data

B. To optimize database queries for faster performance

C. To secure the API by hiding sensitive data

D. To automatically generate GraphQL schemas

Solution

1. Step 1: Understand mocking resolvers

   Mocking resolvers are used to create fake data responses for GraphQL fields without connecting to a real database.

2. Step 2: Identify the main purpose

   This helps frontend developers test and build UI without waiting for backend data.

3. Final Answer:

   To simulate API responses without needing real data -> Option A

4. Quick Check:

   Mocking = Simulate data [OK]

Hint: Mocks simulate data, not optimize or secure APIs [OK]

Common Mistakes:

• Confusing mocking with database optimization
• Thinking mocks secure the API
• Assuming mocks generate schemas automatically

2. Which of the following is the correct way to define a mock resolver for a GraphQL field user that returns a fixed name?

easy

A. const mocks = { Query: { user: () => 'Alice' } };

B. const mocks = { user: { Query: () => 'Alice' } };

C. const mocks = { Query: { user: 'Alice' } };

D. const mocks = { Query: { user: () => ({ name: 'Alice' }) } };

Solution

1. Step 1: Understand mock resolver structure

   Mock resolvers are objects where the type (e.g., Query) maps to functions returning objects matching the schema.

2. Step 2: Check the correct syntax

   The user field should be a function returning an object with a name property, so const mocks = { Query: { user: () => ({ name: 'Alice' }) } }; is correct.

3. Final Answer:

   const mocks = { Query: { user: () => ({ name: 'Alice' }) } }; -> Option D

4. Quick Check:

   Mock resolver returns object with fields [OK]

Hint: Mock functions return objects matching schema fields [OK]

Common Mistakes:

• Returning a string instead of an object
• Swapping Query and user keys
• Not using a function for the resolver

3. Given the mock resolver below, what will be the output of the GraphQL query { book { title author } }?

const mocks = {
  Query: {
    book: () => ({ title: '1984', author: 'George Orwell' })
  }
};

medium

A. { "data": { "book": { "title": "1984", "author": "George Orwell" } } }

B. { "data": { "book": "1984" } }

C. { "data": { "book": { "title": "1984" } } }

D. Error: Resolver must return a string

Solution

1. Step 1: Analyze the mock resolver return value

   The book resolver returns an object with title and author fields as strings.

2. Step 2: Match query fields with returned object

   The query requests title and author, both present in the returned object, so the output includes both.

3. Final Answer:

   { "data": { "book": { "title": "1984", "author": "George Orwell" } } } -> Option A

4. Quick Check:

   Returned object matches query fields [OK]

Hint: Mock returns object matching query fields exactly [OK]

Common Mistakes:

• Expecting only one field returned
• Thinking resolver must return string
• Ignoring requested fields in query

4. Identify the error in the following mock resolver code snippet:

const mocks = {
  Query: {
    user: () => {
      name: 'Bob'
    }
  }
};

medium

A. Extra comma after 'name' property

B. Missing return statement inside the user resolver function

C. Resolver should return a string, not an object

D. Incorrect key name; should be 'User' instead of 'user'

Solution

1. Step 1: Check function body syntax

   The user resolver uses curly braces but does not return an object explicitly.

2. Step 2: Understand JavaScript function return rules

   Without a return statement, the function returns undefined, causing the mock to fail.

3. Final Answer:

   Missing return statement inside the user resolver function -> Option B

4. Quick Check:

   Functions with braces need explicit return [OK]

Hint: Use return or parentheses for object in arrow functions [OK]

Common Mistakes:

• Assuming implicit return with braces
• Confusing type names case sensitivity
• Expecting string return instead of object

5. You want to mock a GraphQL resolver for a product field that returns a list of products with id and price. Which mock resolver correctly returns two products with ids 1 and 2 and prices 10.5 and 20.0 respectively?

hard

A. const mocks = { Query: { product: [{ id: 1, price: 10.5 }, { id: 2, price: 20.0 }] } };

B. const mocks = { Query: { product: () => ({ id: [1, 2], price: [10.5, 20.0] }) } };

C. const mocks = { Query: { product: () => [{ id: 1, price: 10.5 }, { id: 2, price: 20.0 }] } };

D. const mocks = { Query: { product: () => { id: 1; price: 10.5; } } };

Solution

1. Step 1: Understand the expected return type

   The product field should return a list (array) of objects, each with id and price fields.

2. Step 2: Check each option's return value

   const mocks = { Query: { product: () => [{ id: 1, price: 10.5 }, { id: 2, price: 20.0 }] } }; returns an array of two objects with correct fields and values. Others either return wrong types or syntax errors.

3. Final Answer:

   const mocks = { Query: { product: () => [{ id: 1, price: 10.5 }, { id: 2, price: 20.0 }] } }; -> Option C

4. Quick Check:

   Return array of objects for list fields [OK]

Hint: Return array of objects for list fields in mocks [OK]

Common Mistakes:

• Returning object with arrays instead of array of objects
• Assigning array directly without function
• Missing return or using wrong syntax in function