DataLoader batching and caching in GraphQL

Introduction

DataLoader helps to group many small data requests into fewer big ones and remembers past requests to avoid asking the same thing twice.

When your app needs to get data about many users at once, like showing a list of friends.

When you want to avoid asking the database multiple times for the same data during one request.

When you want to speed up your app by reducing repeated data fetching.

When your GraphQL server resolves fields that require loading related data from a database.

When you want to keep your code clean by handling data fetching efficiently in one place.

Syntax

GraphQL

const DataLoader = require('dataloader');

const loader = new DataLoader(async (keys) => {
  // keys is an array of IDs
  // Return an array of results in the same order
});

// Use loader.load(key) to get data for one key
// Use loader.loadMany([key1, key2]) to get data for many keys

The function passed to DataLoader receives an array of keys and must return a Promise of an array of results in the same order.

DataLoader caches results during one request to avoid duplicate fetching.

Examples

This example batches user ID requests and returns users in the same order as requested.

GraphQL

const userLoader = new DataLoader(async (userIds) => {
  const users = await db.getUsersByIds(userIds);
  return userIds.map(id => users.find(user => user.id === id));
});

This batches post ID requests similarly, improving efficiency.

GraphQL

const postLoader = new DataLoader(async (postIds) => {
  const posts = await db.getPostsByIds(postIds);
  return postIds.map(id => posts.find(post => post.id === id));
});

Sample Program

This program creates a DataLoader to batch user ID requests. It fetches users with IDs 1, 2, and 3 efficiently and prints their data.

GraphQL

const DataLoader = require('dataloader');

// Fake database function
async function getUsersByIds(ids) {
  const allUsers = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
  // Simulate async DB call
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(allUsers.filter(user => ids.includes(user.id)));
    }, 100);
  });
}

// Create DataLoader instance
const userLoader = new DataLoader(async (userIds) => {
  const users = await getUsersByIds(userIds);
  return userIds.map(id => users.find(user => user.id === id));
});

// Use DataLoader to load users
async function main() {
  const user1 = await userLoader.load(1);
  const user2 = await userLoader.load(2);
  const user3 = await userLoader.load(3);
  console.log(user1);
  console.log(user2);
  console.log(user3);
}

main();

Important Notes

DataLoader batches requests that happen in the same tick of the event loop.

Cache is per DataLoader instance and usually per request to avoid stale data.

Always return results in the same order as the keys array to avoid mismatches.

Summary

DataLoader groups many small data requests into fewer big ones to improve speed.

It remembers past requests during one operation to avoid asking the same data twice.

Use it in GraphQL servers to efficiently load related data like users or posts.

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