DataLoader batching and caching in GraphQL - Mini Project: Build & Apply

DataLoader Batching and Caching with GraphQL

📖 Scenario: You are building a GraphQL API for a simple blog. The API needs to fetch user data efficiently when resolving posts. To avoid fetching the same user multiple times and to reduce database calls, you will use DataLoader for batching and caching user requests.

🎯 Goal: Build a DataLoader instance that batches multiple user ID requests into a single database call and caches the results to avoid duplicate fetches during a GraphQL query.

📋 What You'll Learn

Create a DataLoader instance for users

Batch user ID requests into a single database call

Cache user data to prevent duplicate fetches

Use the DataLoader in a GraphQL resolver to fetch users by ID

💡 Why This Matters

🌍 Real World

DataLoader is commonly used in GraphQL APIs to optimize database access by batching multiple requests into one and caching results to improve performance.

💼 Career

Understanding DataLoader batching and caching is essential for backend developers working with GraphQL to build efficient and scalable APIs.

1

Setup a mock database function

Create a function called batchGetUsers that takes a list called userIds and returns a Promise resolving to a list of user objects with id and name properties. The function should simulate fetching users from a database by returning users with names like 'User 1', 'User 2', etc., matching the IDs.

GraphQL

# Your code here

Need a hint?

Use userIds.map to create user objects and wrap the result in a Promise.

2

Create a DataLoader instance

Create a constant called userLoader and assign it a new DataLoader instance that uses the batchGetUsers function as its batch loading function.

GraphQL

function batchGetUsers(userIds) {
  return new Promise((resolve) => {
    const users = userIds.map(id => ({ id, name: `User ${id}` }));
    resolve(users);
  });
}

// Your code here

Need a hint?

Use new DataLoader(batchGetUsers) to create the loader.

3

Use DataLoader in a GraphQL resolver

Create a resolver function called getUserById that takes id as an argument and returns the result of calling userLoader.load(id).

GraphQL

import DataLoader from 'dataloader';

function batchGetUsers(userIds) {
  return new Promise((resolve) => {
    const users = userIds.map(id => ({ id, name: `User ${id}` }));
    resolve(users);
  });
}

const userLoader = new DataLoader(batchGetUsers);

// Your code here

Need a hint?

Use userLoader.load(id) inside the resolver function.

4

Complete the GraphQL resolver integration

Export an object called resolvers with a User field containing a user resolver function that takes parent and returns getUserById(parent.userId).

GraphQL

import DataLoader from 'dataloader';

function batchGetUsers(userIds) {
  return new Promise((resolve) => {
    const users = userIds.map(id => ({ id, name: `User ${id}` }));
    resolve(users);
  });
}

const userLoader = new DataLoader(batchGetUsers);

function getUserById(id) {
  return userLoader.load(id);
}

// Your code here

Need a hint?

Define resolvers with a User field and a user resolver that calls getUserById(parent.userId).