DataLoader for batching in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new DataLoader instance.

GraphQL

const userLoader = new DataLoader([1]);

Drag options to blanks, or click blank then click option'

AbatchLoadFn

BloadBatch

CfetchUsers

DgetUserBatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that is not recognized by DataLoader as the batch function.

Passing a single key loader instead of a batch loader function.

The DataLoader constructor requires a batchLoadFn function that batches and returns results.

2fill in blank

medium

Complete the batch loading function to accept keys and return a Promise of results array.

GraphQL

function batchLoadFn([1]) {
  return Promise.resolve(keys.map(key => getUserById(key)));
}

Drag options to blanks, or click blank then click option'

Akeys

Bids

CkeysList

DuserIds

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parameter name that does not match the function usage inside.

Confusing the parameter with a single key instead of an array.

The batch loading function receives an array called keys representing requested IDs.

3fill in blank

hard

Fix the error in the batch function to correctly return results in the same order as keys.

GraphQL

function batchLoadFn(keys) {
  const users = fetchUsersByIds(keys);
  return [1];
}

Drag options to blanks, or click blank then click option'

APromise.resolve(users)

BPromise.resolve(keys.map(key => users.find(u => u.id === key)))

Cusers.map(user => user.id)

Dusers

Attempts:

3 left

💡 Hint

Common Mistakes

Returning users directly without matching keys order.

Returning a Promise of users without mapping to keys order.

DataLoader requires the batch function to return a Promise resolving to an array of results matching the keys order.

4fill in blank

hard

Fill both blanks to create a DataLoader and use it to load a user by ID.

GraphQL

const userLoader = new DataLoader([1]);
userLoader.[2](123).then(user => console.log(user));

Drag options to blanks, or click blank then click option'

AbatchLoadFn

Bload

CfetchUserBatch

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like get instead of load.

Passing wrong function names to the constructor.

The DataLoader is created with the batch loading function, and load is called to get a user by ID.

5fill in blank

hard

Fill all three blanks to implement caching in DataLoader and clear cache for a user ID.

GraphQL

const userLoader = new DataLoader({
  batchLoadFn: batchLoadFn,
  cache: [1]
});

userLoader.[2](456);
userLoader.[3](456);

Drag options to blanks, or click blank then click option'

Atrue

Bload

Cclear

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Disabling cache by setting it to false when caching is needed.

Using wrong method names like remove instead of clear.

Setting cache: true enables caching. Use load to fetch and clear to remove cache for a key.

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