Population

Comments of a post of a user

@frrri/ngxs-crud/populate exposes a populate() instruction.

Imagine the following scenario:

interfaces.ts

interface Post {
    id: number;
    userId: number;
    title: string;
    body: string;
}

interface Comment {
    id: number;
    postId: number;
    userId: number;
    body: number;
}

interface User {
    id: number;
    name: string;
}

states.ts

import { Post, Comment, User } from './interfaces';

@CrudCollection({ name: 'posts' })
@Injectable()
export class PostsState extends CrudCollectionState<Post, Post['id']> { }

@CrudCollection({ name: 'comments' })
@Injectable()
export class CommentsState extends CrudCollectionState<Comment, Comment['id']> { }

@CrudCollection({ name: 'users' })
@Injectable()
export class UsersState extends CrudCollectionState<User, User['id']> { }

@CrudEntities({
    name: 'users',
    children: [
        PostsState,
        CommentsState,
        UsersState
    ],
})
@Injectable()
export class EntitiesState extends CrudEntitiesState { }

Now if you want to display the user's name for every post in your list, you can use populate() to instruct the frrri resolver to fetch every post's user.

You can also fetch all comments for a post and then every user for every comment.

The populate() route instruction

Getting every post's user

import { populate } from '@frrri/ngxs-crud/populate';

const routes: Routes = [
    {
        path: 'posts-with-user',
        component: PostsIndexComponent,
        data: instructions({
            'entities': reset(), // Resets all entities upon entering the route
            'entities.posts': [
                deactivate(), // Deactivates entity, if any was active
                getMany(),
                populate({
                    statePath: 'entities.users', // The target state's path
                    idPath: 'userId', // Where to find the User's id on Post
                }),
            ],
        }),
    }
]

When opening /posts-with-user, it will load all posts and then all users of the loaded posts. If you are using PaginatedCrudCollection, it will do so for every page you load.

Getting one post's comments (via PopulationStrategy.ForeignId)

const routes: Routes = [
    {
        path: ':id',
        component: PostsShowComponent,
        data: instructions({
            'entities.comments': reset(), // Reset comments
            'entities.posts': [
                getActive(), // Activates a comment via the routes :id param
                populate({
                    statePath: 'entities.comments',
                    idPath: 'postId', // Where to find the Post's id on Comment
                    strategy: PopulationStrategy.ForeignId, // Look for id on Comment instead of Post
                }),
            ],
        }),
    }
]

The same configuration would also work if you would change getActive() to getMany(). This would, however, populate all comments of every post loaded by getMany().