DataLoader for batching in GraphQL - Step-by-Step Execution

Concept Flow - DataLoader for batching

Request 1 arrives

↓

Add key1 to batch queue

↓

Request 2 arrives

↓

Add key2 to batch queue

↓

Batch function called once

↓

Fetch data for keys: key1, key2

↓

Return results to Request 1 and Request 2

DataLoader collects multiple requests and batches them into one call to fetch data together, then returns results to each request.

Execution Sample

GraphQL

const loader = new DataLoader(keys => batchLoad(keys));
const result1 = loader.load('key1');
const result2 = loader.load('key2');
// batchLoad called once with ['key1', 'key2']

This code batches two load requests into one batchLoad call with both keys.

Execution Table

Step	Action	Batch Queue	Batch Function Called?	Batch Function Input	Result Returned
1	Request 1 calls load('key1')	['key1']	No	N/A	Promise pending
2	Request 2 calls load('key2')	['key1', 'key2']	No	N/A	Promise pending
3	Event loop tick ends, batch function triggers	[]	Yes	['key1', 'key2']	Results for key1 and key2 returned

💡 Batch function called once with all keys, promises resolved, batch queue cleared

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
batchQueue	[]	['key1']	['key1', 'key2']	[]
promises	{}	{key1: pending}	{key1: pending, key2: pending}	{key1: resolved, key2: resolved}

Key Moments - 2 Insights

Why does DataLoader wait before calling the batch function?

DataLoader waits to collect multiple keys in the batch queue before calling the batch function once, as shown in execution_table rows 1 and 2 where the batch function is not called immediately.

How does DataLoader know which result belongs to which request?

DataLoader keeps promises for each key in the batch queue and resolves them with the corresponding result after the batch function returns, as seen in variable_tracker where promises change from pending to resolved.

Visual Quiz - 3 Questions

Look at the execution table, what is the batch queue after step 2?

A ['key1', 'key2']

B []

C ['key1']

D ['key2']

💡 Hint

Check the 'Batch Queue' column at step 2 in the execution_table

At which step is the batch function called?

A Step 2

B Step 3

C Step 1

D Never

💡 Hint

Look at the 'Batch Function Called?' column in the execution_table

If a third request with 'key3' arrives before the batch function triggers, what happens to the batch queue?

A It remains ['key1', 'key2']

B It resets to ['key3']

C It becomes ['key1', 'key2', 'key3']

D Batch function triggers immediately

💡 Hint

Refer to how batchQueue grows in variable_tracker after multiple load calls

Concept Snapshot

DataLoader batches multiple load requests into one batch function call.
Calls to load() add keys to a queue.
Batch function runs once per event loop tick with all queued keys.
Promises for each key resolve with corresponding results.
This reduces redundant data fetching and improves efficiency.

Full Transcript

DataLoader collects multiple data requests by storing keys in a batch queue. When the event loop finishes current tasks, DataLoader calls the batch function once with all keys collected. Each load call returns a promise that resolves when the batch function returns results. This batching reduces multiple calls into one, improving performance and avoiding duplicate fetches. The batch queue clears after the batch function runs, ready for new requests.

Practice

1. What is the main purpose of using DataLoader in GraphQL?

easy

A. To batch and cache database requests to improve performance

B. To create new database tables automatically

C. To validate GraphQL schema syntax

D. To generate random data for testing

Solution

1. Step 1: Understand DataLoader's role

   DataLoader groups multiple data requests into batches to reduce the number of database calls.

2. Step 2: Recognize performance benefits

   By batching and caching, DataLoader improves performance and avoids redundant fetching.

3. Final Answer:

   To batch and cache database requests to improve performance -> Option A

4. Quick Check:

   DataLoader batches and caches = C [OK]

Hint: DataLoader batches requests to reduce database hits [OK]

Common Mistakes:

• Thinking DataLoader creates database tables
• Confusing DataLoader with schema validation tools
• Assuming DataLoader generates test data

2. Which of the following is the correct way to create a new DataLoader instance in JavaScript?

easy

A. const loader = new DataLoader(batchLoadFn);

B. const loader = DataLoader(batchLoadFn);

C. const loader = DataLoader.new(batchLoadFn);

D. const loader = new DataLoader.load(batchLoadFn);

Solution

1. Step 1: Recall DataLoader instantiation syntax

   DataLoader is a class and must be instantiated with the new keyword.

2. Step 2: Check the correct method call

   The constructor takes a batch loading function as argument, so new DataLoader(batchLoadFn) is correct.

3. Final Answer:

   const loader = new DataLoader(batchLoadFn); -> Option A

4. Quick Check:

   Use new DataLoader() to create instance [OK]

Hint: Always use 'new' keyword to instantiate DataLoader [OK]

Common Mistakes:

• Omitting 'new' keyword
• Using incorrect method calls like .new or .load
• Calling DataLoader as a regular function

3. Given the following DataLoader batch function:

const batchLoadFn = async (keys) => {
  return keys.map(key => key * 2);
};
const loader = new DataLoader(batchLoadFn);

(async () => {
  const result = await Promise.all([
    loader.load(1),
    loader.load(2),
    loader.load(3)
  ]);
  console.log(result);
})();

What will be printed in the console?

medium

A. Error: batchLoadFn must return a Promise

B. [2, 4, 6]

C. [undefined, undefined, undefined]

D. [1, 2, 3]

Solution

1. Step 1: Understand batchLoadFn behavior

   The function takes an array of keys and returns an array where each key is multiplied by 2.

2. Step 2: Analyze loader.load calls

   Calling loader.load(1), loader.load(2), loader.load(3) batches keys [1,2,3] and returns [2,4,6].

3. Final Answer:

   [2, 4, 6] -> Option B

4. Quick Check:

   Keys doubled = [2,4,6] [OK]

Hint: Batch function maps keys to results in order [OK]

Common Mistakes:

• Expecting original keys instead of doubled values
• Thinking batchLoadFn returns undefined
• Assuming batchLoadFn must reject Promise

4. Consider this incorrect DataLoader batch function:

const batchLoadFn = (keys) => {
  keys.forEach(key => console.log(key));
};
const loader = new DataLoader(batchLoadFn);
loader.load(1).then(console.log);

What is the main problem with this code?

medium

A. forEach cannot be used inside batchLoadFn

B. DataLoader cannot log keys inside batchLoadFn

C. loader.load must be called with an array, not a single key

D. batchLoadFn does not return a Promise resolving to an array

Solution

1. Step 1: Check batchLoadFn return value

   batchLoadFn must return a Promise resolving to an array of results matching keys.

2. Step 2: Identify missing return

   Current batchLoadFn only logs keys and returns undefined, causing DataLoader to fail.

3. Final Answer:

   batchLoadFn does not return a Promise resolving to an array -> Option D

4. Quick Check:

   Batch function must return Promise with results [OK]

Hint: Batch function must return Promise with array results [OK]

Common Mistakes:

• Thinking logging inside batchLoadFn causes error
• Believing loader.load requires array argument
• Assuming forEach is disallowed in batchLoadFn

5. You want to use DataLoader to batch database calls for user data by IDs. However, some IDs may be invalid and cause the database to return null. How should your batch function handle these null results to keep DataLoader working correctly?

hard

A. Throw an error when any null is found

B. Filter out nulls and return only valid user objects

C. Return an array with nulls in the same order as input keys

D. Return an empty array if any null exists

Solution

1. Step 1: Understand DataLoader result order requirement

   DataLoader expects the batch function to return an array matching the input keys order, including nulls for missing data.

2. Step 2: Handle nulls properly

   Returning nulls in place preserves the order and allows DataLoader to cache results correctly without errors.

3. Final Answer:

   Return an array with nulls in the same order as input keys -> Option C

4. Quick Check:

   Keep result array order with nulls for missing keys [OK]

Hint: Keep result array order, include nulls for missing data [OK]

Common Mistakes:

• Filtering out nulls breaks result order
• Throwing errors for missing data unnecessarily
• Returning empty array causes cache issues