Why resolvers connect schema to data in GraphQL - See It in Action

Understanding Why Resolvers Connect Schema to Data in GraphQL

📖 Scenario: Imagine you are building a simple online bookstore. You want to create a system where users can ask for book details, and your system will give them the right information. To do this, you use GraphQL, which needs a way to connect the questions (queries) to the actual book data stored somewhere. This connection is made by something called resolvers.

🎯 Goal: Build a basic GraphQL schema for books and write resolvers that connect the schema fields to the actual book data. This will help you understand how resolvers act as the bridge between the schema and the data.

📋 What You'll Learn

Create a GraphQL schema with a Book type that has id, title, and author fields

Create a Query type with a book field that takes an id argument and returns a Book

Set up a simple data array with book objects matching the schema

Write resolvers that fetch the correct book from the data array based on the id argument

💡 Why This Matters

🌍 Real World

Resolvers are the glue in GraphQL that connect the schema (the questions clients ask) to the actual data (answers). This project shows how to build that connection simply.

💼 Career

Understanding resolvers is essential for backend developers working with GraphQL APIs, as they implement the logic to fetch and return data requested by clients.

1

Create the Book data array

Create a variable called books that is an array containing these exact book objects: { id: '1', title: '1984', author: 'George Orwell' } and { id: '2', title: 'Brave New World', author: 'Aldous Huxley' }.

GraphQL

# Your code here

Hint

Think of books as a list of book cards, each with an id, title, and author.

2

Define the GraphQL schema

Create a GraphQL schema string called typeDefs that defines a Book type with id, title, and author fields all of type String!. Also define a Query type with a book field that takes an id argument of type String! and returns a Book.

GraphQL

const books = [
  { id: '1', title: '1984', author: 'George Orwell' },
  { id: '2', title: 'Brave New World', author: 'Aldous Huxley' }
];

# Your code here

Hint

Define the shape of your data and the query to get a book by its id.

3

Write the resolver function for the book query

Create a resolvers object with a Query field. Inside Query, write a function called book that takes parent, args, and returns the book from books where book.id === args.id.

GraphQL

const books = [
  { id: '1', title: '1984', author: 'George Orwell' },
  { id: '2', title: 'Brave New World', author: 'Aldous Huxley' }
];

const typeDefs = `
  type Book {
    id: String!
    title: String!
    author: String!
  }

  type Query {
    book(id: String!): Book
  }
`;

# Your code here

Hint

The resolver function looks at the id argument and finds the matching book in the books array.

4

Complete the GraphQL server setup

Add the final code to create an ApolloServer instance using typeDefs and resolvers, and export it as server.

GraphQL

const books = [
  { id: '1', title: '1984', author: 'George Orwell' },
  { id: '2', title: 'Brave New World', author: 'Aldous Huxley' }
];

const typeDefs = `
  type Book {
    id: String!
    title: String!
    author: String!
  }

  type Query {
    book(id: String!): Book
  }
`;

const resolvers = {
  Query: {
    book(parent, args) {
      return books.find(book => book.id === args.id);
    }
  }
};

# Your code here

Hint

This final step sets up the GraphQL server that uses your schema and resolvers to answer queries.

Practice

1. What is the main role of a resolver in GraphQL?

easy

A. To fetch or compute the data for a specific field in the schema

B. To define the structure of the GraphQL schema

C. To handle user authentication and authorization

D. To format the query string before execution

Solution

1. Step 1: Understand the purpose of resolvers

   Resolvers are functions that run when a field in the schema is requested to provide the actual data.

2. Step 2: Differentiate from schema definition

   The schema defines the shape of data, but resolvers connect those fields to real data sources or computations.

3. Final Answer:

   To fetch or compute the data for a specific field in the schema -> Option A

4. Quick Check:

   Resolvers fetch data = A [OK]

Hint: Resolvers provide data for fields, not schema or auth [OK]

Common Mistakes:

• Confusing resolvers with schema definitions
• Thinking resolvers handle authentication
• Believing resolvers format queries

2. Which of the following is the correct syntax for a simple resolver function in GraphQL?

easy

A. const resolver = (parent; args; context) => data;

B. const resolver = { parent, args, context } => data;

C. const resolver = (parent, args, context) => data;

D. const resolver = (parent args context) => data;

Solution

1. Step 1: Recall JavaScript arrow function syntax

   Arrow functions use parentheses for parameters separated by commas, e.g., (a, b, c) => result.

2. Step 2: Check each option's parameter syntax

   const resolver = (parent, args, context) => data; uses commas correctly; A uses semicolons instead of commas; B uses braces instead of parentheses; D misses commas.

3. Final Answer:

   const resolver = (parent, args, context) => data; -> Option C

4. Quick Check:

   Arrow function params need commas = C [OK]

Hint: Arrow function params need commas inside parentheses [OK]

Common Mistakes:

• Using braces {} instead of parentheses () for parameters
• Separating parameters with semicolons
• Omitting commas between parameters

3. Given this resolver snippet, what will be the output when querying userName?

const resolvers = {
  Query: {
    userName: () => "Alice"
  }
};

medium

A. "Alice"

B. "userName"

C. null

D. Error: resolver not found

Solution

1. Step 1: Identify the resolver function for userName

   The resolver for userName returns the string "Alice" directly.

2. Step 2: Understand the query result

   When the userName field is queried, the resolver returns "Alice", so the output is "Alice".

3. Final Answer:

   "Alice" -> Option A

4. Quick Check:

   Resolver returns "Alice" = B [OK]

Hint: Resolver return value is the query output [OK]

Common Mistakes:

• Confusing field name with returned value
• Expecting null if no arguments
• Assuming error without resolver

4. Identify the error in this resolver code snippet:

const resolvers = {
  Query: {
    userAge: (parent, args) => {
      return args.age
    }
  }
};

// Query: { userAge }
// Variables: {}

medium

A. Missing context parameter in resolver

B. Resolver expects argument 'age' but none provided in query

C. Resolver should return parent instead of args.age

D. Syntax error: missing semicolon after return

Solution

1. Step 1: Check resolver parameters and usage

   The resolver expects an argument named 'age' from args to return.

2. Step 2: Analyze the query and variables

   The query requests userAge but provides no variables, so args.age is undefined.

3. Final Answer:

   Resolver expects argument 'age' but none provided in query -> Option B

4. Quick Check:

   Missing argument in query = D [OK]

Hint: Check if query provides needed args for resolver [OK]

Common Mistakes:

• Assuming context is always required
• Ignoring missing query variables
• Thinking missing semicolon causes error here

5. You want to fetch a user's full profile by combining data from two sources: a database and an external API. How should you design the resolver for the userProfile field?

hard

A. Fetch data only from the database and ignore the API

B. Define the schema to include both data sources without a resolver

C. Use two separate resolvers for the same field to fetch data independently

D. Write a resolver that calls the database and API, then merges results before returning

Solution

1. Step 1: Understand resolver role in combining data

   Resolvers can run code to fetch and combine data from multiple sources before returning.

2. Step 2: Evaluate options for fetching and merging data

   Write a resolver that calls the database and API, then merges results before returning correctly describes writing a resolver that calls both sources and merges results. Other options either ignore data sources or misuse resolvers.

3. Final Answer:

   Write a resolver that calls the database and API, then merges results before returning -> Option D

4. Quick Check:

   Resolvers combine data sources = A [OK]

Hint: Combine data in one resolver function for the field [OK]

Common Mistakes:

• Expecting schema alone to fetch data
• Trying multiple resolvers for one field
• Ignoring one data source