Why resolvers connect schema to data in GraphQL - Visual Breakdown

Concept Flow - Why resolvers connect schema to data

Client sends query

↓

GraphQL Server receives query

↓

Schema defines types & fields

↓

Resolver functions run

↓

Resolvers fetch or compute data

↓

Data returned to client

The flow shows how a client query goes through the schema, then resolvers fetch the actual data, and finally the data is sent back.

Execution Sample

GraphQL

type Query {
  book(id: ID!): Book
}

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

This schema defines a book query, and the resolver fetches the book data by ID from the database.

Execution Table

Step	Action	Input	Resolver Called	Data Fetched	Output
1	Receive query	{ book(id: "1") }	N/A	N/A	N/A
2	Match schema field	book(id: "1")	Query.book	N/A	N/A
3	Call resolver	id = "1"	Query.book	database.findBookById("1")	Book object with id 1
4	Return data	Book object	N/A	N/A	{ book: { id: "1", title: "GraphQL Guide" } }

💡 Query resolved and data returned to client

Variable Tracker

Variable	Start	After Step 3	Final
args.id	undefined	"1"	"1"
resolver result	undefined	Book object with id 1	Book object with id 1

Key Moments - 2 Insights

Why does the resolver get called after matching the schema field?

Because the schema defines what fields exist, but the resolver is the function that actually fetches or computes the data for that field, as shown in execution_table step 3.

What happens if the resolver does not return data?

The client will get null or an error for that field, since the resolver is responsible for providing the data, as seen in the output column of step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the resolver called when the query is processed?

A database.findBookById

B Query.book

C Client.query

D Schema.book

💡 Hint

Check the 'Resolver Called' column in step 3 of the execution table.

At which step does the resolver fetch data from the database?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Data Fetched' column in the execution table.

If the resolver returned null, what would change in the execution table output?

A Output would show null instead of a Book object

B Resolver Called would be different

C Input would change

D Data Fetched would be empty string

💡 Hint

Refer to the 'Output' column in step 4 of the execution table.

Concept Snapshot

GraphQL schema defines the shape of data.
Resolvers are functions that fetch or compute data for schema fields.
When a query runs, resolvers connect schema fields to actual data.
Without resolvers, schema fields have no data.
Resolvers receive arguments and return data to the client.

Full Transcript

In GraphQL, the client sends a query to the server. The server uses the schema to understand what data is requested. Each field in the schema has a resolver function that knows how to get the actual data. The resolver runs with the query arguments, fetches data from a database or other source, and returns it. This data is then sent back to the client. This process connects the schema to real data, making GraphQL queries work.

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