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.