DataLoader batching and caching in GraphQL - Step-by-Step Execution

Concept Flow - DataLoader batching and caching

Request 1 for key A

↓

Request 2 for key B

↓

Batch keys A, B

↓

Single batch fetch from DB

↓

Return results for A, B

↓

Cache results for A, B

↓

Request 3 for key A

↓

Return cached result for A

DataLoader collects multiple requests, batches them into one database call, caches results, and returns cached data for repeated requests.

Execution Sample

GraphQL

const loader = new DataLoader(keys => batchLoad(keys));

loader.load('A');
loader.load('B');
// batchLoad called once with ['A','B']
loader.load('A'); // returns cached result

This code batches two loads into one DB call and caches the result for repeated keys.

Execution Table

Step	Action	Keys Requested	Batch Triggered?	DB Call Keys	Cache State	Returned Result
1	loader.load('A') called	['A']	No	[]	{}	Promise pending
2	loader.load('B') called	['A','B']	Yes	['A','B']	{}	Promise pending
3	batchLoad(['A','B']) called	['A','B']	Yes	['A','B']	{}	Fetching from DB
4	DB returns results	['A','B']	No	[]	{"A": "resultA", "B": "resultB"}	Results for A and B
5	loader.load('A') called again	['A']	No	[]	{"A": "resultA", "B": "resultB"}	Returns cached resultA
6	loader.load('C') called	['C']	Yes	['C']	{"A": "resultA", "B": "resultB"}	Promise pending
7	batchLoad(['C']) called	['C']	Yes	['C']	{"A": "resultA", "B": "resultB"}	Fetching from DB
8	DB returns result for C	['C']	No	[]	{"A": "resultA", "B": "resultB", "C": "resultC"}	Result for C
9	Execution ends	-	-	-	-	-

💡 No more load calls; all requested keys fetched and cached.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	After Step 8	Final
keysRequested	[]	['A','B']	['A','B']	['A']	['C']	[]
cache	{}	{}	{"A": "resultA", "B": "resultB"}	{"A": "resultA", "B": "resultB"}	{"A": "resultA", "B": "resultB", "C": "resultC"}	{"A": "resultA", "B": "resultB", "C": "resultC"}
dbCalls	0	0	1	1	2	2

Key Moments - 3 Insights

Why does loader.load('A') not trigger a new DB call after the first batch?

Because the result for 'A' is cached after the first batch (see step 4 and step 5 in execution_table), so DataLoader returns the cached result immediately without calling the DB again.

How does DataLoader know when to batch multiple keys together?

DataLoader batches keys requested within the same event loop tick before calling the batchLoad function (see steps 1 and 2 where keys 'A' and 'B' are collected before the DB call in step 3).

What happens if a new key is requested after the cache has some keys?

DataLoader batches only the new keys not in cache (see step 6 and 7 where 'C' is requested and batchLoad is called only for ['C']).

Visual Quiz - 3 Questions

Look at the execution_table at step 5. What does loader.load('A') return?

A Cached result for 'A'

B Triggers a new DB call

C Returns undefined

D Returns a promise pending DB call

💡 Hint

Check the 'Cache State' and 'Returned Result' columns at step 5 in execution_table.

At which step does DataLoader batch keys 'A' and 'B' together for a single DB call?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Batch Triggered?' and 'DB Call Keys' columns in execution_table.

If loader.load('B') was called again after step 5, what would happen?

A A new DB call for 'B' would be made

B The cached result for 'B' would be returned

C An error would occur

D It would batch with 'C' automatically

💡 Hint

Refer to the cache state after step 5 in variable_tracker and execution_table.

Concept Snapshot

DataLoader batches multiple key requests into one DB call.
It caches results to avoid repeated DB calls for same keys.
Keys requested in the same tick are grouped.
Repeated requests return cached results immediately.
Batch function receives array of keys and returns results array.
Improves efficiency by reducing DB round-trips.

Full Transcript

DataLoader helps optimize database requests by batching multiple key requests into a single call and caching results. When you call loader.load('A') and loader.load('B') quickly, DataLoader waits to collect these keys and then calls the batch function once with both keys. The database returns results for both keys, which DataLoader caches. Later, if you request 'A' again, DataLoader returns the cached result immediately without calling the database again. This process reduces the number of database calls and improves performance. The execution table shows each step: initial requests, batching, database calls, caching, and returning cached results. Key moments include understanding when batching happens, why cached results prevent new DB calls, and how new keys after caching are handled. The visual quiz tests understanding of these steps. The snapshot summarizes the main points for quick recall.