Mocking resolvers in GraphQL - Mini Project: Build & Apply

Mocking Resolvers in GraphQL

📖 Scenario: You are building a simple GraphQL API for a bookstore. Before connecting to a real database, you want to create mock resolvers to simulate data fetching. This helps frontend developers start working without waiting for the backend to be fully ready.

🎯 Goal: Create a GraphQL schema for books and authors, then write mock resolvers that return fixed sample data for queries.

📋 What You'll Learn

Define a GraphQL schema with types Book and Author

Create a query type with books and authors fields

Write mock resolver functions that return fixed arrays of books and authors

Connect the schema and resolvers to create a working mock GraphQL server

💡 Why This Matters

🌍 Real World

Mocking resolvers lets frontend developers work with a GraphQL API before the real database and backend logic are ready.

💼 Career

Understanding how to mock GraphQL resolvers is useful for rapid prototyping, testing, and collaboration between frontend and backend teams.

1

Define the GraphQL schema

Create a GraphQL schema string called typeDefs with these exact types: Book with fields id: ID!, title: String!, authorId: ID!; Author with fields id: ID!, name: String!; and a Query type with fields books: [Book!]! and authors: [Author!]!.

GraphQL

# Your code here

Hint

Use the gql template literal to define your schema string.

2

Create mock data arrays

Create two constant arrays called books and authors. books should contain exactly two objects with keys id, title, and authorId with values '1', 'The Great Gatsby', '1' and '2', '1984', '2'. authors should contain exactly two objects with keys id and name with values '1', 'F. Scott Fitzgerald' and '2', 'George Orwell'.

GraphQL

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Book {
    id: ID!
    title: String!
    authorId: ID!
  }

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

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

# Your code here

Hint

Use arrays of objects with exact keys and values as specified.

3

Write mock resolver functions

Create a constant object called resolvers with a Query field. Inside Query, add two functions: books and authors. Each function should return the corresponding array books or authors.

GraphQL

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Book {
    id: ID!
    title: String!
    authorId: ID!
  }

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

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

const books = [
  { id: '1', title: 'The Great Gatsby', authorId: '1' },
  { id: '2', title: '1984', authorId: '2' }
];

const authors = [
  { id: '1', name: 'F. Scott Fitzgerald' },
  { id: '2', name: 'George Orwell' }
];

# Define resolvers object with Query field and functions
# Your code here

Hint

Use arrow functions inside the Query object to return the arrays.

4

Create the Apollo Server with mocks

Create a constant called server by instantiating ApolloServer with an object containing typeDefs and resolvers. Use const { ApolloServer } = require('apollo-server'); at the top. This completes the mock GraphQL server setup.

GraphQL

const { gql, ApolloServer } = require('apollo-server');

const typeDefs = gql`
  type Book {
    id: ID!
    title: String!
    authorId: ID!
  }

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

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

const books = [
  { id: '1', title: 'The Great Gatsby', authorId: '1' },
  { id: '2', title: '1984', authorId: '2' }
];

const authors = [
  { id: '1', name: 'F. Scott Fitzgerald' },
  { id: '2', name: 'George Orwell' }
];

const resolvers = {
  Query: {
    books: () => books,
    authors: () => authors
  }
};

# Instantiate ApolloServer with typeDefs and resolvers
# Your code here

Hint

Import ApolloServer and create a new instance with your schema and resolvers.

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