DataLoader batching and caching in GraphQL - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of DataLoader in GraphQL?

DataLoader helps to batch and cache database or API requests to reduce the number of calls and improve performance.

intermediate

How does DataLoader batch requests?

DataLoader collects multiple requests for data during a single tick of the event loop and sends them as one combined request to the database or API.

beginner

What is caching in DataLoader and why is it useful?

Caching means storing the result of a request so if the same data is requested again, DataLoader returns the cached result instead of making a new request. This saves time and resources.

intermediate

Can DataLoader cache be disabled? If yes, why would you do that?

Yes, DataLoader cache can be disabled if you want fresh data every time or if caching causes stale data issues in your application.

intermediate

What happens if you create a new DataLoader instance for every request?

Creating a new DataLoader per request ensures caching and batching are isolated per request, preventing data leaks between users and ensuring fresh cache per request.

What does DataLoader primarily help to reduce in GraphQL applications?

A Number of database or API calls

B Number of GraphQL queries

C Size of the database

D Number of frontend components

DataLoader batches multiple requests into one, reducing the number of database or API calls.

When does DataLoader send the batched requests to the database?

A Only when cache is empty

B Immediately after each request

C After 1 minute delay

D At the end of the event loop tick

DataLoader waits until the current event loop tick finishes to batch all requests together.

What is a benefit of caching in DataLoader?

A It avoids repeated fetching of the same data

B It slows down the application

C It deletes old data automatically

D It increases the number of requests

Caching avoids fetching the same data multiple times, improving performance.

Why might you disable caching in DataLoader?

A To reduce memory usage

B To always get fresh data

C To increase batch size

D To speed up caching

Disabling cache ensures you get fresh data every time, useful if data changes frequently.

What is a recommended practice for using DataLoader in a server handling multiple users?

A Use a single global DataLoader instance

B Disable batching

C Create a new DataLoader instance per request

D Cache data forever

Creating a new DataLoader per request prevents data leaks and ensures isolated caching.

Explain how DataLoader batching works and why it improves performance.

Think about how requests are grouped before sending.

Describe the role of caching in DataLoader and when you might want to disable it.

Consider the trade-off between speed and data freshness.

Practice

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

easy

A. To batch multiple data requests into a single request and cache results during one operation

B. To replace the database with an in-memory store

C. To generate GraphQL schema automatically

D. To handle user authentication and authorization

Solution

1. Step 1: Understand DataLoader's role in GraphQL

   DataLoader groups many small data requests into fewer big ones to reduce database calls.

2. Step 2: Identify caching behavior

   It also caches results during one operation to avoid duplicate requests for the same data.

3. Final Answer:

   To batch multiple data requests into a single request and cache results during one operation -> Option A

4. Quick Check:

   Batching + caching = To batch multiple data requests into a single request and cache results during one operation [OK]

Hint: Remember: DataLoader batches and caches requests [OK]

Common Mistakes:

• Thinking DataLoader replaces the database
• Confusing DataLoader with schema generation tools
• Assuming it handles authentication

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

easy

A. const loader = DataLoader(batchLoadFn);

B. const loader = new 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 method usage

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

3. Final Answer:

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

4. Quick Check:

   Use new with DataLoader class [OK]

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

Common Mistakes:

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

3. Given the following DataLoader usage, what will be the output?

const DataLoader = require('dataloader');

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

(async () => {
  const result1 = await loader.load(2);
  const result2 = await loader.load(3);
  console.log([result1, result2]);
})();

medium

A. [4, 6]

B. [2, 3]

C. [NaN, NaN]

D. [undefined, undefined]

Solution

1. Step 1: Understand batchLoadFn behavior

   The batch function doubles each key: for key 2 returns 4, for key 3 returns 6.

2. Step 2: Analyze loader.load calls

   Calling loader.load(2) and loader.load(3) triggers batchLoadFn with keys [2,3], returning [4,6].

3. Final Answer:

   [4, 6] -> Option A

4. Quick Check:

   Keys doubled = [4, 6] [OK]

Hint: Batch function maps keys to doubled values [OK]

Common Mistakes:

• Expecting original keys as output
• Confusing async behavior with undefined
• Ignoring batch function logic

4. Identify the error in this DataLoader usage code snippet:

const DataLoader = require('dataloader');

const batchLoadFn = async keys => {
  return keys.map(key => fetchUserFromDB(key));
};

const loader = new DataLoader(batchLoadFn);

loader.load(1).then(user => console.log(user));

Assuming fetchUserFromDB returns a Promise resolving to user data.

medium

A. DataLoader must be called without 'new' keyword

B. fetchUserFromDB should not return a Promise

C. loader.load should be called with an array of keys, not a single key

D. batchLoadFn should return a Promise resolving to an array, but it returns an array of Promises

Solution

1. Step 1: Check batchLoadFn return type

   batchLoadFn returns an array of Promises because fetchUserFromDB returns a Promise for each key.

2. Step 2: Understand DataLoader batch function requirement

   DataLoader expects batchLoadFn to return a single Promise resolving to an array of results, not an array of Promises.

3. Final Answer:

   batchLoadFn should return a Promise resolving to an array, but it returns an array of Promises -> Option D

4. Quick Check:

   Return a Promise of array, not array of Promises [OK]

Hint: Batch function must return Promise resolving array, not array of Promises [OK]

Common Mistakes:

• Returning array of Promises instead of Promise of array
• Misusing 'new' keyword with DataLoader
• Passing single key instead of array to batch function

5. You want to optimize a GraphQL server that fetches posts and their authors. You use DataLoader for users and posts. Which approach best uses DataLoader's batching and caching to avoid redundant database calls?

hard

A. Create a new DataLoader instance for each field resolver call

B. Create a global DataLoader instance shared across all requests to cache all users and posts forever

C. Create one DataLoader instance per request for users and posts, and use load for each user or post ID

D. Call database queries directly without DataLoader to avoid complexity

Solution

1. Step 1: Understand DataLoader lifecycle

   DataLoader instances should be created per request to cache data only during that request and avoid stale data.

2. Step 2: Use DataLoader to batch and cache IDs

   Using load for each user or post ID lets DataLoader batch requests and cache results within the request.

3. Final Answer:

   Create one DataLoader instance per request for users and posts, and use load for each user or post ID -> Option C

4. Quick Check:

   Per-request DataLoader + load calls = Create one DataLoader instance per request for users and posts, and use load for each user or post ID [OK]

Hint: Create DataLoader per request, not globally or per field [OK]

Common Mistakes:

• Sharing DataLoader globally causing stale cache
• Creating new DataLoader per field causing no batching
• Skipping DataLoader and querying DB repeatedly