DataLoader for batching in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this DataLoader batch function?

Consider a DataLoader batch function that receives an array of user IDs and returns user objects in the same order.

Given the following batch function:

async function batchUsers(userIds) {
  const users = await db.query('SELECT * FROM users WHERE id IN (?)', [userIds]);
  return userIds.map(id => users.find(user => user.id === id));
}

What will be the output if userIds is [3, 1, 2] and the database returns users in order [{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]?

GraphQL

async function batchUsers(userIds) {
  const users = await db.query('SELECT * FROM users WHERE id IN (?)', [userIds]);
  return userIds.map(id => users.find(user => user.id === id));
}

A [{id:3, name:'Carol'}, undefined, {id:2, name:'Bob'}]

B [{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]

C [{id:3, name:'Carol'}, {id:1, name:'Alice'}, {id:2, name:'Bob'}]

D [undefined, undefined, undefined]

💡 Hint

Remember DataLoader expects the batch function to return results in the same order as the keys.

The batch function maps each requested ID to the corresponding user object found in the database result. Since userIds is [3,1,2], the output array matches this order with the correct user objects.

🧠 Conceptual

intermediate

Why use DataLoader in GraphQL APIs?

What is the main reason to use DataLoader in a GraphQL API?

A To validate GraphQL schema types automatically

B To batch and cache database requests to reduce redundant queries

C To generate GraphQL queries dynamically

D To encrypt data sent over the network

💡 Hint

Think about performance optimization when fetching data.

DataLoader batches multiple requests for the same resource into a single database query and caches results to avoid duplicate fetching, improving performance.

📝 Syntax

advanced

Identify the syntax error in this DataLoader batch function

Which option contains a syntax error in the batch function for DataLoader?

const batchFunction = async (keys) => {
  const results = await db.query('SELECT * FROM items WHERE id IN (?)', [keys]);
  return keys.map(key => results.find(item => item.id === key));
}

A

}
;))yek === di.meti >= meti(dnif.stluser >= yek(pam.syek nruter  
;)]syek[ ,')?( NI di EREHW smeti MORF * TCELES'(yreuq.bd tiawa = stluser tsnoc  
{ >= )syek( cnysa = noitcnuFhctab tsnoc

B

const batchFunction = async (keys) => {
  const results = await db.query('SELECT * FROM items WHERE id IN (?)', keys);
  return keys.map(key => results.find(item => item.id === key));
}

C

const batchFunction = async keys => {
  const results = await db.query('SELECT * FROM items WHERE id IN (?)', keys);
  return keys.map(key => results.find(item => item.id === key));
}

D

const batchFunction = async (keys) => {
  const results = await db.query('SELECT * FROM items WHERE id IN (?)', [keys]);
  return keys.map(key => results.find(item => item.id === key));
}

💡 Hint

Look carefully at the comparison operator inside the find callback.

Option D uses a single equals sign = instead of a comparison operator ===, causing an assignment instead of comparison, which is a syntax error in this context.

❓ optimization

advanced

How to optimize DataLoader batch function for large key arrays?

You have a DataLoader batch function that receives a large array of keys. Which approach optimizes performance best?

A Split keys into smaller chunks and query the database multiple times in parallel, then combine results

B Query the database once with all keys in a single IN clause

C Cache only the first 10 keys and ignore the rest

D Query the database separately for each key sequentially

💡 Hint

Consider database query limits and parallelism.

Splitting large key arrays into smaller chunks and querying in parallel avoids database query size limits and improves throughput compared to one huge query or many sequential queries.

🔧 Debug

expert

Why does this DataLoader batch function cause incorrect results?

Given this batch function:

async function batch(keys) {
  const rows = await db.query('SELECT * FROM products WHERE id IN (?)', [keys]);
  return rows;
}

Why might this cause incorrect results when used with DataLoader?

A Because the function returns rows in arbitrary order, not matching the order of keys

B Because the query uses IN (?) which is invalid syntax

C Because the function does not cache results

D Because the function does not handle errors

💡 Hint

Think about DataLoader's requirement for batch function output order.

DataLoader expects the batch function to return results in the same order as the keys array. Returning rows directly from the database without reordering can cause mismatched results.

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