Mocking resolvers in GraphQL - Step-by-Step Execution

Concept Flow - Mocking resolvers

Define schema with types

↓

Create mock resolvers for fields

↓

Query execution triggers resolver

↓

Mock resolver returns fake data

↓

Query returns mocked data to client

This flow shows how GraphQL queries use mock resolvers to return fake data based on the schema.

Execution Sample

GraphQL

type Query {
  book: Book
}

type Book {
  title: String
  author: String
}

// Mock resolver
const mocks = {
  Query: { book: () => ({ title: "Mock Title", author: "Mock Author" }) }
};

Defines a simple schema and a mock resolver that returns fake book data when queried.

Execution Table

Step	Action	Resolver Called	Returned Value	Query Result
1	Start query for 'book'	No	N/A	N/A
2	Resolver for Query.book called	Query.book	{ title: "Mock Title", author: "Mock Author" }	N/A
3	Resolver for Book.title called	Book.title	"Mock Title"	"title": "Mock Title"
4	Resolver for Book.author called	Book.author	"Mock Author"	"author": "Mock Author"
5	Assemble final response	No	N/A	{ book: { title: "Mock Title", author: "Mock Author" } }

💡 Query completes after all fields resolved with mocked data.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
book	undefined	{ title: "Mock Title", author: "Mock Author" }	{ title: "Mock Title", author: "Mock Author" }	{ title: "Mock Title", author: "Mock Author" }	{ title: "Mock Title", author: "Mock Author" }
title	undefined	undefined	"Mock Title"	"Mock Title"	"Mock Title"
author	undefined	undefined	undefined	"Mock Author"	"Mock Author"

Key Moments - 2 Insights

Why does the Query.book resolver return an object instead of a simple string?

Because the 'book' field returns a Book type object, the resolver must return an object with fields 'title' and 'author' as shown in execution_table step 2.

How does the mock resolver know what fields to provide for the Book type?

The mock resolver returns an object matching the Book type shape. The GraphQL engine then calls resolvers for each field like 'title' and 'author' as in steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what value does the Query.book resolver return at step 2?

A "Mock Title"

B { title: "Mock Title", author: "Mock Author" }

C "Mock Author"

D undefined

💡 Hint

Check the 'Returned Value' column at step 2 in the execution_table.

At which step does the resolver for the 'author' field return its value?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Resolver Called' column to find when 'Book.author' is resolved.

If the mock resolver for Query.book returned null, what would the final query result be?

A { book: { title: "Mock Title" } }

B An error would occur

C { book: null }

D { book: {} }

💡 Hint

Consider what happens when a resolver returns null for an object field in GraphQL.

Concept Snapshot

Mocking resolvers in GraphQL:
- Define schema types
- Create mock resolvers returning fake data
- Query triggers resolvers
- Resolvers return mocked values
- Query returns mocked data to client

Full Transcript

This visual execution shows how mocking resolvers work in GraphQL. First, a schema defines types like Query and Book. Then, mock resolvers are created to return fake data for these types. When a query requests the 'book' field, the Query.book resolver is called and returns a mock object with title and author. Next, the GraphQL engine calls resolvers for each field of Book, returning mocked strings. Finally, the query response assembles all mocked data and returns it to the client. This process helps developers test and develop without real data sources.

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