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.