API with NestJS #28. Dealing in the N + 1 problem in GraphQL

February 8, 2021

This entry is part 28 of 177 in the API with NestJS

In the previous article, we’ve implemented resolvers and queries. There is quite a common catch with them, though. It is referred to as the N + 1 problem. In this article, we illustrate the issue and provide a few ways to deal with it.

The N + 1 problem

The N + 1 problem can appear when we fetch nested, related data. A good example would be the following query:

Graphql query

Above, we request an author for every post. One way to do so would be to use the @ResolveField() decorator that NestJS gives us. Let’s add it to our resolver:

posts.resolver.ts

import { Parent, Query, ResolveField, Resolver } from '@nestjs/graphql';

import { Post } from './models/post.model';

import PostsService from './posts.service';

import { User } from '../users/models/user.model';

import { UsersService } from '../users/users.service';

@Resolver(() => Post)

export class PostsResolver {

constructor(

private postsService: PostsService,

private usersService: UsersService,

) {}

@Query(() => [Post])

async posts() {

const posts = await this.postsService.getPosts();

return posts.items;

}

@ResolveField('author', () => User)

async getAuthor(@Parent() post: Post) {

const { authorId } = post;

return this.usersService.getById(authorId);

}

// ...

}

In this example, we create a field resolver. What we return from it becomes the value of the author. To figure out which author we need to query from the database, we access the parent. In this case, the post is the parent of the author.

In this series, we use the TypeORM library. To have access to the authorId property, we need to use @RelationId() decorator.

post.entity.ts

import { Entity, ManyToOne, PrimaryGeneratedColumn, Index, RelationId } from 'typeorm';

import User from '../users/user.entity';

@Entity()

class Post {

@PrimaryGeneratedColumn()

public id: number;

@Index('post_authorId_index')

@ManyToOne(() => User, (author: User) => author.posts)

public author: User

@RelationId((post: Post) => post.author)

public authorId: number;

// ...

}

We also need to add it to our GraphQL model.

post.model.ts

import { Field, Int, ObjectType } from '@nestjs/graphql';

import { User } from '../../users/models/user.model';

@ObjectType()

export class Post {

@Field(() => Int)

id: number;

@Field(() => Int)

authorId: number;

@Field()

author: User;

// ...

}

Seeing the issue

While the above certainly works, it has a serious flaw. To visualize it, let’s modify our DataBase slightly:

import { Module } from '@nestjs/common';

import { TypeOrmModule } from '@nestjs/typeorm';

import { ConfigModule, ConfigService } from '@nestjs/config';

@Module({

imports: [

TypeOrmModule.forRootAsync({

imports: [ConfigModule],

inject: [ConfigService],

useFactory: (configService: ConfigService) => ({

type: 'postgres',

host: configService.get('POSTGRES_HOST'),

// ...

logging: true,

})

}),

})

export class DatabaseModule {}

You can find more options connected to the logging functionality in the official TypeORM documentation.

Thanks to logging: true, we can now see what queries we make to the database. It looks a bit like the following:

SELECT * FROM post;

SELECT * FROM user WHERE id = 1;

SELECT * FROM user WHERE id = 2;

SELECT * FROM user WHERE id = 1;

SELECT * FROM user WHERE id = 2;

...

The core of the issue is that for N posts, we make N + 1 queries to the database. This is why it is called the N + 1 problem.

Solving the N + 1 problem with the DataLoader

One of the ways of solving the above issue is using the DataLoader library. We can use it to batch our requests and load all entities at once.

const batchAuthorsLoader = new DataLoader(userIds: number[] => {

// ... fetch all users

});

batchAuthorsLoader.load(1);

batchAuthorsLoader.load(2);

batchAuthorsLoader.load(1);

With the above code, we tell the DataLoader that we will need authors with certain ids. Our goal is to batch all of those and create queries like that:

1	SELECT * FROM post; SELECT * FROM user WHERE id IN (1, 2, 3)

Some libraries aim to integrate the DataLoader with NestJS, but they are not well maintained.

The crucial thing to understand with the DataLoader is that it should be initialized once per request. Therefore, it is commonly used within a GraphQL context object that can be initialized once per every request. We could achieve it with a code like that:

GraphQLModule.forRootAsync({

imports: [ConfigModule, UsersModule],

inject: [ConfigService, UsersService],

useFactory: (

configService: ConfigService,

usersService: UsersService

) => ({

playground: Boolean(configService.get('GRAPHQL_PLAYGROUND')),

autoSchemaFile: join(process.cwd(), 'src/schema.gql'),

context: () => ({

batchAuthorsLoader: batchAuthorsLoader(usersService)

})

}),

Unfortunately, this is not very elegant, because we would need to put all of our loaders there in one place. Instead, we can follow a very cool idea by Jeppe Smith.

First, let’s create a method that can query multiple users from the database at once.

users.service.ts

import { Injectable } from '@nestjs/common';

import { InjectRepository } from '@nestjs/typeorm';

import { Repository, In } from 'typeorm';

import User from './user.entity';

@Injectable()

export class UsersService {

constructor(

@InjectRepository(User)

private usersRepository: Repository<User>,

) {}

async getByIds(ids: number[]) {

return this.usersRepository.find({

where: { id: In(ids) },

});

}

// ...

}

An important thing to remember that the order of the results in usersRepository.find is not guaranteed. The results that we return from our DataLoader need to be in the same order as the ids. Therefore, we need to map them to ensure that.

Let’s create an Injectable with scope: Scope.REQUEST. This means that NestJS will reinitialize our class for every request.

posts.loaders.ts

import { Injectable, Scope } from '@nestjs/common';

import { UsersService } from '../../users/users.service';

import * as DataLoader from 'dataloader';

@Injectable({ scope: Scope.REQUEST })

export default class PostsLoaders {

constructor(

private usersService: UsersService,

) {

}

public readonly batchAuthors = new DataLoader(async (authorIds: number[]) => {

const users = await this.usersService.getByIds(authorIds);

const usersMap = new Map(users.map(user => [user.id, user]));

return authorIds.map(authorId => usersMap.get(authorId));

})

}

We also need to add PostsLoaders to providers array in the PostModule.

The last thing is to use the above loader in our resolver.

posts.resolver.ts

import { Parent, Query, ResolveField, Resolver } from '@nestjs/graphql';

import { Post } from './models/post.model';

import PostsService from './posts.service';

import { User } from '../users/models/user.model';

import PostsLoaders from './loaders/posts.loaders';

@Resolver(() => Post)

export class PostsResolver {

constructor(

private postsService: PostsService,

private postsLoaders: PostsLoaders

) {}

@Query(() => [Post])

async posts() {

const posts = await this.postsService.getPosts();

return posts.items;

}

@ResolveField('author', () => User)

async getAuthor(

@Parent() post: Post

) {

const { authorId } = post;

return this.postsLoaders.batchAuthors.load(authorId);

}

// ...

}

With the above solutions, we make just two queries to the database. The first one is for the posts, and the second one is for all of the authors.

Solving the N + 1 issue with JOIN queries

Instead of the above approach, we might create just one database query that joins posts and users. First, let’s look into the implementation of a method that does that in the PostsService.

posts.service.ts

import { CACHE_MANAGER, Inject, Injectable } from '@nestjs/common';

import CreatePostDto from './dto/createPost.dto';

import Post from './post.entity';

import { InjectRepository } from '@nestjs/typeorm';

import { Repository } from 'typeorm';

import { MoreThan, FindManyOptions } from 'typeorm';

@Injectable()

export default class PostsService {

constructor(

@InjectRepository(Post)

private postsRepository: Repository<Post>,

) {}

async getPosts(offset?: number, limit?: number, startId?: number, options?: FindManyOptions<Post>) {

const where: FindManyOptions<Post>['where'] = {};

let separateCount = 0;

if (startId) {

where.id = MoreThan(startId);

separateCount = await this.postsRepository.count();

}

const [items, count] = await this.postsRepository.findAndCount({

where,

order: {

id: 'ASC'

skip: offset,

take: limit,

...options

});

return {

items,

count: startId ? separateCount : count

}

async getPostsWithAuthors(offset?: number, limit?: number, startId?: number) {

return this.getPosts(offset, limit, startId, {

relations: ['author'],

})

}

Above, our getPosts method contains the pagination functionality. If you want to know more about it, check out API with NestJS #17. Offset and keyset pagination with PostgreSQL and TypeORM

Now, let’s use the getPostsWithAuthors method in our resolver:

posts.resolver.ts

import { Query, Resolver } from '@nestjs/graphql';

import { Post } from './models/post.model';

import PostsService from './posts.service';

@Resolver(() => Post)

export class PostsResolver {

constructor(

private postsService: PostsService

) {}

@Query(() => [Post])

async posts() {

const posts = await this.postsService.getPostsWithAuthors();

return posts.items;

}

// ...

}

Thanks to that approach, TypeORM generates a single query both for the posts and the authors. There is an issue here, though. With the above code, we always fetch both posts and authors, even if the client does not request it.

Fortunately, we can access the details about the GraphQL query with the @Info() decorator. The most straightforward way to use it is with the graphql-parse-resolve-info library.

posts.resolver.ts

import { Info, Query, Resolver } from '@nestjs/graphql';

import { Post } from './models/post.model';

import PostsService from './posts.service';

import { parseResolveInfo, ResolveTree, simplifyParsedResolveInfoFragmentWithType } from 'graphql-parse-resolve-info';

import { GraphQLResolveInfo } from 'graphql';

@Resolver(() => Post)

export class PostsResolver {

constructor(

private postsService: PostsService

) {}

@Query(() => [Post])

async posts(

@Info() info: GraphQLResolveInfo

) {

const parsedInfo = parseResolveInfo(info) as ResolveTree;

const simplifiedInfo = simplifyParsedResolveInfoFragmentWithType(

parsedInfo,

info.returnType

);

const posts = 'author' in simplifiedInfo.fields

? await this.postsService.getPostsWithAuthors()

: await this.postsService.getPosts();

return posts.items;

}

Thanks to the above optimization, we join posts with authors only if the user requests it through the query.

Summary

This article tackled the N + 1 problem, which is a common issue in the GraphQL world. The first approach that we’ve implemented was with the DataLoader library. With it, we’ve limited the number of queries that we perform to two. The second way of solving the problem was with a JOIN query performed through TypeORM.

There are a lot more topics when it comes to GraphQL, so you can expect more articles about it. Stay tuned!

Series Navigation<< API with NestJS #27. Introduction to GraphQL. Queries, mutations, and authenticationAPI with NestJS #29. Real-time updates with GraphQL subscriptions >>

9 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Luis Schweigard

3 years ago

Tried this method, and failed!

The error: TypeError: dataloader_1.default is not a constructor

Any ideas?

Author

Marcin Wanago

Reply to Luis Schweigard

Make sure you are using
import * as DataLoader from 'dataloader'
and not
import DataLoader from 'dataloader'

[Edit]: The issue seems to be the Typescript Compiler screwing up the import.

Changing import DataLoader from ‘dataloader’; to import * as DataLoader from ‘dataloader’; solved the issue, but this is very weird …

Itunedy

If you config in tsconfig.json: “allowSyntheticDefaultImports”: true,

Then you are able to import module directly :

1	import Dataloader from 'dataloader';

Apapacy

Join-monster npm package is solve n+1problem too

Last edited 3 years ago by Apapacy

Tal Shtark

What if i have “Post” and “Comment” entities (both with “author” field) and i want to utilize the same “batchAuthors” function to load the author field for both of them? should it be defined in “PostsLoaders”/”CommentsLoaders”? both? or in other place?

Roy B

Reply to Tal Shtark

If you’re making two requests, to fetch both posts and comments with relation to their author,
as long as they run at the same event loop tick, Dataloader won’t load the same author twice.

1 2	await this.postRepository.find({relations: ['author']}); await this.commentsRepository.find({relations: ['author']});

Last edited 3 years ago by Roy B

Rafael

2 years ago

You can create users.loader.ts and don’t forget to user Scope as REQUEST.

import { UsersService } from '../users.service';

export class UsersLoader {

constructor(private usersService: UsersService) {}

readonly batchUsers = new DataLoader(async (ids: number[]) => {

const users = await this.usersService.getByIds(ids);

const usersMap = new Map(users.map((user) => [user.id, user]));

return ids.map((id) => usersMap.get(id));

Leonard Mounir

Can you add an example for an external data source. Example , Apollo use rest endpoint datasource- how would you work with that?