DataLoader for batching in GraphQL

Introduction

DataLoader helps to group many small data requests into one big request. This makes fetching data faster and saves resources.

When you need to get data for many users at once in a GraphQL query.

When your app makes many small database calls that can be combined.

When you want to avoid asking the database the same question multiple times.

When you want to improve performance by reducing the number of requests.

When you have nested queries that fetch related data repeatedly.

Syntax

GraphQL

const DataLoader = require('dataloader');

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

batchLoadFunction is a function that takes an array of keys and returns a Promise of an array of results.

DataLoader automatically groups keys and calls batchLoadFunction once per event loop tick.

Examples

This creates a DataLoader to batch load users by their IDs.

GraphQL

const userLoader = new DataLoader(userIds => batchGetUsers(userIds));

This DataLoader batches loading posts by their IDs.

GraphQL

const postLoader = new DataLoader(postIds => batchGetPosts(postIds));

A simple batch function that returns data for each key.

GraphQL

const loader = new DataLoader(keys => Promise.resolve(keys.map(key => fetchData(key))));

Sample Program

This example shows how DataLoader batches requests for users with IDs 1 and 2. The third request for ID 1 uses the cache.

GraphQL

const DataLoader = require('dataloader');

// Simulate database fetch
function batchGetUsers(userIds) {
  console.log('Batch loading users:', userIds);
  return Promise.resolve(userIds.map(id => ({ id, name: `User${id}` })));
}

const userLoader = new DataLoader(batchGetUsers);

async function main() {
  const user1 = await userLoader.load(1);
  const user2 = await userLoader.load(2);
  const user3 = await userLoader.load(1); // Cached
  console.log(user1, user2, user3);
}

main();

Important Notes

DataLoader batches requests within the same event loop tick.

It caches results to avoid duplicate requests for the same key.

Always return results in the same order as the keys array.

Summary

DataLoader groups many small data requests into one batch.

It improves performance by reducing database calls.

It caches results to avoid repeated fetching.

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